coursecode 0.1.0

package/framework/css/components/document-gallery.css

@@ -0,0 +1,425 @@
+/* ============================================================================
+   DOCUMENT GALLERY - Sidebar resource gallery with thumbnails
+   ============================================================================
+   
+   PURPOSE: Collapsible document gallery in the sidebar showing course resources
+   
+   INCLUDES:
+   - Gallery container and header toggle
+   - Thumbnail grid (2-column layout)
+   - Thumbnail card variants (PDF, markdown, image)
+   - Inverse collapse (nav hides when gallery expands)
+   - Reset state when sidebar closes
+   
+   DEPENDENCIES:
+   - design-tokens.css (--color-*, --space-*, --shadow-*, --transition-*)
+   - sidebar.css (sidebar structure)
+   - lightbox.css (thumbnail base patterns)
+   
+   USED BY:
+   - framework/js/navigation/document-gallery.js
+   
+   LAST UPDATED: 2026-02-06
+   ============================================================================ */
+
+/* ============================================================================
+   GALLERY CONTAINER
+   ============================================================================ */
+
+.sidebar-gallery {
+    border-top: 1px solid var(--border-default);
+    overflow: clip;
+}
+
+.sidebar-gallery.expanded {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ============================================================================
+   GALLERY HEADER (expand/collapse toggle)
+   ============================================================================ */
+
+.sidebar-gallery-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--space-3) var(--space-4);
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition: color var(--transition-fast), background var(--transition-fast);
+    user-select: none;
+}
+
+.sidebar-gallery-header:hover {
+    color: var(--text-primary);
+    background: var(--bg-surface-hover);
+}
+
+.sidebar-gallery-header:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+    border-radius: var(--radius-sm);
+}
+
+.sidebar-gallery-header-icon {
+    flex-shrink: 0;
+    opacity: 0.7;
+}
+
+.sidebar-gallery-header-label {
+    flex: 1;
+    text-align: left;
+}
+
+.sidebar-gallery-header-chevron {
+    flex-shrink: 0;
+    transition: transform var(--transition-normal);
+    opacity: 0.5;
+}
+
+.sidebar-gallery.expanded .sidebar-gallery-header-chevron {
+    transform: rotate(180deg);
+}
+
+.sidebar-gallery-header-count {
+    font-size: var(--font-size-xs);
+    font-weight: 400;
+    opacity: 0.6;
+    letter-spacing: normal;
+    text-transform: none;
+}
+
+/* ============================================================================
+   GALLERY CONTENT (thumbnail grid)
+   ============================================================================ */
+
+.sidebar-gallery-content {
+    max-height: 0;
+    overflow: clip;
+    transition: max-height var(--transition-slow);
+}
+
+.sidebar-gallery.expanded .sidebar-gallery-content {
+    flex: 1;
+    max-height: 800px;
+    overflow-x: clip;
+    overflow-y: auto;
+}
+
+.sidebar-gallery-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4) var(--space-4);
+}
+
+/* ============================================================================
+   THUMBNAIL CARDS (sidebar-sized variants)
+   ============================================================================ */
+
+.sidebar-gallery-item {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-2);
+    background: none;
+    border: none;
+    border-radius: var(--radius-md);
+    padding: var(--space-1);
+    min-height: 0;
+    cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+    min-width: 0;
+    overflow: hidden;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+}
+
+.sidebar-gallery-item:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 1px;
+    border-radius: var(--radius-md);
+}
+
+/* Shared thumbnail base */
+.sidebar-gallery-thumb {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 17 / 22;
+    border-radius: var(--radius-md);
+    border: var(--border-width-thin) solid var(--border-default, var(--color-gray-300));
+    overflow: hidden;
+    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12));
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+    background: var(--bg-surface);
+    isolation: isolate;
+}
+
+.sidebar-gallery-thumb::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--color-primary-alpha-20);
+    z-index: 1;
+    pointer-events: none;
+}
+
+.sidebar-gallery-thumb::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 28%;
+    background: linear-gradient(to top, color-mix(in srgb, var(--palette-black) 22%, transparent), transparent);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--transition-fast);
+}
+
+.sidebar-gallery-item:hover .sidebar-gallery-thumb {
+    border-color: var(--border-strong, var(--color-gray-400));
+    box-shadow: var(--shadow-md, 0 4px 10px rgba(0,0,0,.16));
+    transform: translateY(-1px);
+}
+
+.sidebar-gallery-item:hover .sidebar-gallery-thumb::after,
+.sidebar-gallery-item:focus-visible .sidebar-gallery-thumb::after {
+    opacity: 1;
+}
+
+/* Image thumbnails */
+.sidebar-gallery-thumb-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+}
+
+/* PDF thumbnail placeholder */
+.sidebar-gallery-thumb-pdf {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    height: 100%;
+    overflow: hidden;
+    background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--bg-surface) 100%);
+}
+
+.sidebar-gallery-thumb-pdf-icon {
+    color: var(--color-danger, #dc2626);
+    opacity: 0.8;
+}
+
+/* Constrain SVG icons inside thumbnails — Firefox doesn't auto-size viewBox-only SVGs */
+.sidebar-gallery-thumb-pdf-icon .icon {
+    width: 2rem;
+    height: 2rem;
+    max-width: 2rem;
+    max-height: 2rem;
+}
+
+.sidebar-gallery-thumb-pdf-badge {
+    position: absolute;
+    top: var(--space-2);
+    left: var(--space-2);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 18px;
+    padding: 0 var(--space-1);
+    background: var(--color-danger, #dc2626);
+    color: var(--color-white);
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-radius: var(--radius-full);
+    box-shadow: var(--shadow-sm);
+}
+
+/* Markdown thumbnail preview */
+.sidebar-gallery-thumb-md {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    background: var(--bg-surface);
+}
+
+.sidebar-gallery-thumb-md-content {
+    padding: var(--space-2);
+    font-size: 0.625rem;
+    line-height: 1.35;
+    color: var(--text-primary);
+    pointer-events: none;
+}
+
+.sidebar-gallery-thumb-md-content h1 {
+    font-size: 0.65rem;
+    margin: 0 0 0.3em 0;
+    font-weight: 600;
+}
+
+.sidebar-gallery-thumb-md-content h2 {
+    font-size: 0.55rem;
+    margin: 0.4em 0 0.2em 0;
+    font-weight: 600;
+}
+
+.sidebar-gallery-thumb-md-content p {
+    margin: 0 0 0.3em 0;
+}
+
+.sidebar-gallery-thumb-md-content ul,
+.sidebar-gallery-thumb-md-content ol {
+    margin: 0 0 0.3em 0;
+    padding-left: 0.8em;
+}
+
+/* Fade-out at bottom */
+.sidebar-gallery-thumb-md::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 30px;
+    background: linear-gradient(to top, var(--bg-surface), transparent);
+    pointer-events: none;
+}
+
+/* Item label */
+.sidebar-gallery-label {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    text-align: center;
+    font-weight: var(--font-weight-medium);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    line-height: 1.3;
+    min-height: calc(2 * 1.3em);
+}
+
+/* ============================================================================
+   INVERSE COLLAPSE (nav hides when gallery is expanded)
+   ============================================================================ */
+
+.sidebar.gallery-expanded #menu {
+    max-height: 0;
+    padding: 0;
+    overflow: hidden;
+    transition: max-height var(--transition-slow), padding var(--transition-slow);
+}
+
+/* Ensure nav smoothly transitions back */
+#menu {
+    transition: max-height var(--transition-slow), padding var(--transition-slow);
+    max-height: 800px;
+}
+
+/* ============================================================================
+   DOWNLOAD OVERLAY (shown when allowDownloads is enabled)
+   ============================================================================ */
+
+.sidebar-gallery-download {
+    position: absolute;
+    top: var(--space-2);
+    right: var(--space-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: var(--radius-full);
+    background: color-mix(in srgb, var(--palette-black) 45%, transparent);
+    color: var(--color-white);
+    opacity: 0;
+    transition: opacity var(--transition-fast), background var(--transition-fast);
+    z-index: 2;
+    text-decoration: none;
+}
+
+.sidebar-gallery-item:hover .sidebar-gallery-download {
+    opacity: 1;
+}
+
+.sidebar-gallery-download:hover {
+    background: color-mix(in srgb, var(--palette-black) 65%, transparent);
+}
+
+.sidebar-gallery-item[data-gallery-type="pdf"] .sidebar-gallery-thumb::before {
+    background: var(--color-danger-alpha-30);
+}
+
+.sidebar-gallery-item[data-gallery-type="markdown"] .sidebar-gallery-thumb::before {
+    background: var(--color-info-alpha-30);
+}
+
+.sidebar-gallery-item[data-gallery-type="image"] .sidebar-gallery-thumb::before {
+    background: var(--color-success-alpha-20);
+}
+
+/* ============================================================================
+   EMPTY STATE
+   ============================================================================ */
+
+.sidebar-gallery-empty {
+    padding: var(--space-5);
+    text-align: center;
+    color: var(--text-muted);
+    font-size: var(--font-size-sm);
+    font-style: italic;
+    background: var(--bg-subtle);
+    border: var(--border-width-thin) dashed var(--border-default);
+    border-radius: var(--radius-md);
+    margin: var(--space-3) var(--space-4) var(--space-4);
+}
+
+/* ============================================================================
+   RESPONSIVE
+   ============================================================================ */
+
+@media (max-width: 767px) {
+    .sidebar-gallery-grid {
+        gap: var(--space-3);
+        padding: var(--space-2) var(--space-3) var(--space-3);
+    }
+}
+
+/* ============================================================================
+   ACCESSIBILITY
+   ============================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+    .sidebar-gallery-content,
+    .sidebar-gallery-header-chevron,
+    .sidebar-gallery-thumb,
+    #menu {
+        transition: none;
+    }
+}

package/framework/css/components/dropdown.css

@@ -0,0 +1,115 @@
+/* ============================================================================
+   CUSTOM DROPDOWN - Styled dropdown component
+   ============================================================================
+   
+   PURPOSE: JavaScript-driven custom dropdown with full styling control
+   
+   INCLUDES:
+   - Dropdown trigger button with custom styling
+   - Dropdown menu with scrollable options
+   - Active state and selected state styling
+   - Focus states for accessibility
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   - Requires: ui-components/dropdown.js (JavaScript component)
+   
+   USED BY: Course authors who need advanced dropdown functionality
+   
+   USAGE:
+   <div class="custom-dropdown">
+     <button class="dropdown-trigger" data-action="toggle-dropdown">Choose an option</button>
+     <div class="dropdown-menu">
+       <div class="dropdown-item" data-value="option-1">Option 1</div>
+       <div class="dropdown-item" data-value="option-2">Option 2</div>
+     </div>
+   </div>
+   
+   WHEN TO USE:
+   - You need filtering or search functionality
+   - You need complex option rendering
+   - You need dynamic option loading
+   - For simple form dropdowns, use native <select> instead
+   
+   ============================================================================ */
+
+.custom-dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+button.dropdown-trigger {
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  background-color: var(--bg-elevated);
+  border: var(--border-width-md) solid var(--color-gray-300);
+  border-radius: var(--radius-lg);
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--font-size-base);
+  color: var(--color-gray-900);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
+}
+
+button.dropdown-trigger:focus-visible {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
+}
+
+button.dropdown-trigger:hover {
+  border-color: var(--color-secondary);
+}
+
+button.dropdown-trigger::after {
+  content: '▼';
+  font-size: 0.8em;
+  margin-left: var(--space-2);
+  color: var(--color-gray-500);
+  transition: transform var(--transition-fast);
+}
+
+button.dropdown-trigger[aria-expanded="true"]::after {
+  transform: rotate(180deg);
+}
+
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: var(--bg-elevated);
+  border: var(--border-width-thin) solid var(--color-gray-300);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 100;
+  margin-top: var(--space-1);
+  max-height: var(--size-dropdown-max-height);
+  overflow-y: auto;
+}
+
+.dropdown-menu.active {
+  display: block;
+}
+
+.dropdown-item {
+  padding: var(--space-2) var(--space-4);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+  color: var(--color-gray-900);
+}
+
+.dropdown-item:hover {
+  background-color: var(--bg-muted);
+}
+
+.dropdown-item.selected {
+  background-color: var(--color-primary-alpha-10);
+  color: var(--color-primary);
+  font-weight: var(--font-weight-medium);
+}

package/framework/css/components/embed-frame.css

@@ -0,0 +1,142 @@
+/* ============================================================================
+   EMBED FRAME - Sandboxed iframe for custom HTML/JS apps
+   ============================================================================
+   
+   PURPOSE: Provides CSS-isolated container for embedding custom interactive
+   content within slides. Uses iframe for complete style sandboxing.
+   
+   INCLUDES:
+   - Wrapper with optional aspect ratio
+   - Responsive iframe sizing
+   - Auto-height mode via postMessage
+   - Loading state
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   
+   USED BY: Custom interactive widgets, mini-apps, simulations
+   
+   AI DEBUGGING TIPS:
+   - Iframe not loading? Check src path resolution
+   - Content overlap? Check aspect-ratio or auto-height mode
+   - postMessage not working? Verify sandbox allows 'allow-scripts allow-same-origin'
+   - Resize not working? Ensure no aspect-ratio is set (auto-height mode only)
+   
+   ============================================================================ */
+
+/* Wrapper container */
+.embed-frame-wrapper {
+    position: relative;
+    width: 100%;
+    background: var(--color-gray-800, #374151);
+    /* Neutral loading state */
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    border: var(--border-width-sm) solid var(--border-default);
+    /* Prevent glow/shadow effects from escaping */
+    isolation: isolate;
+    contain: paint;
+}
+
+/* Fixed aspect ratio mode */
+.embed-frame-wrapper[style*="aspect-ratio"] {
+    min-height: 200px;
+}
+
+/* Auto-height mode */
+.embed-frame-auto-height {
+    min-height: 200px;
+    height: auto;
+}
+
+/* The iframe element */
+.embed-frame-iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: transparent;
+}
+
+/* For aspect ratio mode, position absolutely to fill container */
+.embed-frame-wrapper[style*="aspect-ratio"] .embed-frame-iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+}
+
+/* For auto-height mode, use natural flow */
+.embed-frame-auto-height .embed-frame-iframe {
+    position: relative;
+    min-height: 200px;
+}
+
+/* Focus state for accessibility */
+.embed-frame-wrapper:focus-within {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+}
+
+/* ============================================================================
+   LOADING STATE
+   ============================================================================ */
+
+/* Loading indicator while iframe loads */
+.embed-frame-wrapper::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 24px;
+    height: 24px;
+    margin: -12px 0 0 -12px;
+    border: 2px solid var(--color-gray-300);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: embed-frame-spin 0.8s linear infinite;
+    z-index: 1;
+    pointer-events: none;
+}
+
+/* Ensure iframe covers the loading spinner */
+.embed-frame-auto-height .embed-frame-iframe {
+    position: relative;
+    z-index: 2;
+}
+
+@keyframes embed-frame-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* ============================================================================
+   RESPONSIVE DESIGN
+   ============================================================================ */
+
+/* Ensure aspect ratio is maintained on all screen sizes */
+@media (max-width: 768px) {
+    .embed-frame-wrapper {
+        border-radius: var(--radius-sm);
+    }
+}
+
+/* ============================================================================
+   ACCESSIBILITY - Reduced Motion
+   ============================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+    .embed-frame-wrapper::before {
+        animation: none;
+    }
+}
+
+/* ============================================================================
+   DARK MODE
+   ============================================================================ */
+
+/* Dark mode handled automatically via semantic CSS variables */
+/* Uses: --bg-surface, --border-default, --focus-ring-color */