coursecode 0.1.0

package/lib/stub-player/styles/_assessments-panel.css

@@ -0,0 +1,245 @@
+        /* =====================================================================
+         * ASSESSMENTS PANEL - Shows assessment definitions from course config
+         * Uses same structure as config-panel (floating window style)
+         * ===================================================================== */
+        #stub-player-assessments-panel {
+            position: fixed;
+            top: 48px;
+            right: 16px;
+            width: 520px;
+            max-width: 90vw;
+            max-height: calc(100vh - 64px);
+            background: var(--color-primary);
+            color: var(--color-gray-200);
+            border-radius: 8px;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
+            z-index: 999997;
+            display: none;
+            flex-direction: column;
+            font-size: 13px;
+        }
+
+        #stub-player-assessments-panel.visible {
+            display: flex;
+        }
+
+        #stub-player-assessments-panel-header {
+            padding: 12px 16px;
+            background: var(--color-primary-deep);
+            border-radius: 8px 8px 0 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--color-primary-panel);
+            flex-shrink: 0;
+        }
+
+        #stub-player-assessments-panel-header h3 {
+            font-size: 14px;
+            font-weight: 600;
+            margin: 0;
+        }
+
+        #stub-player-assessments-panel-header button {
+            background: none;
+            border: none;
+            color: var(--color-gray-650);
+            cursor: pointer;
+            font-size: 18px;
+            padding: 0;
+        }
+
+        #stub-player-assessments-panel-header button:hover {
+            color: var(--color-white);
+        }
+
+        #stub-player-assessments-tabs {
+            display: flex;
+            background: var(--color-primary-deep);
+            border-bottom: 1px solid var(--color-primary-panel);
+            flex-shrink: 0;
+            overflow-x: auto;
+        }
+
+        #stub-player-assessments-tabs button {
+            padding: 10px 16px;
+            background: none;
+            border: none;
+            color: var(--color-gray-650);
+            cursor: pointer;
+            font-size: 12px;
+            border-bottom: 2px solid transparent;
+            transition: all 0.15s;
+            white-space: nowrap;
+        }
+
+        #stub-player-assessments-tabs button:hover {
+            color: var(--color-gray-400);
+            background: rgba(255, 255, 255, 0.03);
+        }
+
+        #stub-player-assessments-tabs button.active {
+            color: var(--color-warning);
+            border-bottom-color: var(--color-warning);
+            background: rgba(241, 135, 1, 0.08);
+        }
+
+        #stub-player-assessments-body {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px;
+            max-height: 500px;
+        }
+
+        .assessments-empty {
+            text-align: center;
+            padding: 40px 20px;
+            color: var(--color-gray-750);
+        }
+
+        .assessments-loading {
+            text-align: center;
+            padding: 40px 20px;
+            color: var(--color-gray-750);
+        }
+
+        /* Assessment info header */
+        #stub-player-assessments-panel .assessment-info {
+            background: rgba(139, 48, 32, 0.15);
+            border-radius: 6px;
+            padding: 12px;
+            margin-bottom: 12px;
+        }
+
+        #stub-player-assessments-panel .assessment-info .assessment-title {
+            font-weight: 600;
+            color: var(--color-white);
+            margin-bottom: 4px;
+        }
+
+        #stub-player-assessments-panel .assessment-info .assessment-id {
+            font-size: 11px;
+            color: var(--color-gray-750);
+            font-family: monospace;
+        }
+
+        /* Assessment questions table */
+        .assessment-questions-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 12px;
+            margin-top: 12px;
+        }
+
+        .assessment-questions-table th,
+        .assessment-questions-table td {
+            padding: 8px 10px;
+            text-align: left;
+            border-bottom: 1px solid var(--color-primary-panel);
+        }
+
+        .assessment-questions-table th {
+            background: var(--color-primary-deep);
+            color: var(--color-info-soft);
+            font-weight: 600;
+            font-size: 11px;
+            text-transform: uppercase;
+        }
+
+        .assessment-questions-table td {
+            color: var(--color-gray-200);
+        }
+
+        .question-id {
+            font-family: 'Consolas', 'Monaco', monospace;
+            color: var(--color-warning);
+            font-size: 11px;
+        }
+
+        .question-type {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 10px;
+            font-weight: 600;
+            text-transform: uppercase;
+            background: rgba(139, 48, 32, 0.2);
+            color: var(--color-danger-soft);
+        }
+
+        /* Confirm dialog (reusable) */
+        #stub-player-confirm-dialog {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.7);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999999;
+        }
+
+        #stub-player-confirm-dialog.visible {
+            display: flex;
+        }
+
+        .confirm-content {
+            background: var(--color-primary);
+            padding: 24px;
+            border-radius: 12px;
+            max-width: 400px;
+            text-align: center;
+        }
+
+        .confirm-content h3 {
+            margin-bottom: 12px;
+            color: var(--color-white);
+        }
+
+        .confirm-content p {
+            color: var(--color-gray-550);
+            margin-bottom: 20px;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .confirm-actions {
+            display: flex;
+            gap: 12px;
+            justify-content: center;
+        }
+
+        .confirm-content button {
+            padding: 10px 20px;
+            border-radius: 6px;
+            border: none;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .confirm-content .btn-primary {
+            background: var(--color-info);
+            color: var(--color-white);
+        }
+
+        .confirm-content .btn-primary:hover {
+            background: var(--color-info);
+        }
+
+        .confirm-content .btn-danger {
+            background: color-mix(in srgb, var(--color-danger) 55%, var(--color-black));
+            color: var(--color-white);
+        }
+
+        .confirm-content .btn-danger:hover {
+            background: var(--color-danger);
+        }
+
+        .confirm-content .btn-secondary {
+            background: var(--color-primary-panel);
+            color: var(--color-white);
+        }
+
+        .confirm-content .btn-secondary:hover {
+            background: var(--color-info);
+        }

package/lib/stub-player/styles/_base.css

@@ -0,0 +1,89 @@
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            /* Framework-style color tokens for stub UI. */
+            --color-primary: #14213d;
+            --color-primary-panel: color-mix(in srgb, var(--color-primary) 82%, var(--color-black));
+            --color-primary-deep: color-mix(in srgb, var(--color-primary) 65%, var(--color-black));
+            --color-primary-surface: color-mix(in srgb, var(--color-primary) 92%, var(--color-black));
+
+            --color-info: #4a6fa5;
+            --color-info-soft: color-mix(in srgb, var(--color-info) 45%, var(--color-white));
+            --color-info-muted: color-mix(in srgb, var(--color-info) 35%, var(--color-white));
+            --color-info-bright: color-mix(in srgb, var(--color-info) 55%, var(--color-white));
+            --color-info-border: color-mix(in srgb, var(--color-info) 60%, var(--color-black));
+
+            --color-success: #1d7648;
+            --color-success-soft: color-mix(in srgb, var(--color-success) 62%, var(--color-white));
+            --color-success-bright: color-mix(in srgb, var(--color-success) 42%, var(--color-white));
+
+            --color-warning: #f18701;
+            --color-warning-bright: color-mix(in srgb, var(--color-warning) 70%, var(--color-accent));
+            --color-accent: #f7b801;
+
+            --color-danger: #f35b04;
+            --color-danger-soft: color-mix(in srgb, var(--color-danger) 55%, var(--color-white));
+            --color-black: #000;
+
+            /* Neutral scale used across stub UI surfaces/text. */
+            --color-white: #fff;
+            --color-gray-50: #f8f8ff;
+            --color-gray-100: #f4f4f4;
+            --color-gray-200: #e0e0e0;
+            --color-gray-225: #e0e0f0;
+            --color-gray-300: #ddd;
+            --color-gray-350: #ccc;
+            --color-gray-400: #c0c0d0;
+            --color-gray-410: #c0c0c0;
+            --color-gray-500: #b0b0c0;
+            --color-gray-550: #a0a0c0;
+            --color-gray-560: #a0a0b0;
+            --color-gray-570: #9090a0;
+            --color-gray-600: #9ca3af;
+            --color-gray-620: #8888aa;
+            --color-gray-650: #888;
+            --color-gray-700: #808080;
+            --color-gray-750: #6b7280;
+            --color-gray-760: #666;
+            --color-gray-780: #4a4a4a;
+            --color-gray-790: #3a3a3a;
+            --color-gray-800: #2a2a2a;
+            --color-gray-850: #1a1a1a;
+            --color-gray-900: #0a0f1a;
+        }
+
+        html,
+        body {
+            height: 100%;
+            overflow: hidden;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        }
+
+        /* ── Styled scrollbars ──────────────────── */
+
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.15);
+            border-radius: 3px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.25);
+        }
+
+        * {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+        }

package/lib/stub-player/styles/_catalog-icons.css

@@ -0,0 +1,96 @@
+        /* =====================================================================
+         * CATALOG PANEL — ICON GALLERY
+         * Visual grid of available SVG icons with click-to-copy
+         * ===================================================================== */
+
+        .catalog-icon-category {
+            margin-bottom: 12px;
+        }
+
+        .catalog-icon-category-header {
+            padding: 8px 16px 4px;
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--color-info-soft);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .catalog-icon-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 2px;
+            padding: 0 8px;
+        }
+
+        .catalog-icon-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+            padding: 10px 4px 6px;
+            background: none;
+            border: 1px solid transparent;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.15s;
+            color: var(--color-gray-600);
+        }
+
+        .catalog-icon-item:hover {
+            background: rgba(74, 111, 165, 0.12);
+            border-color: rgba(74, 111, 165, 0.2);
+            color: var(--color-gray-200);
+        }
+
+        .catalog-icon-item.copied {
+            background: rgba(52, 211, 153, 0.15);
+            border-color: rgba(52, 211, 153, 0.3);
+            color: var(--color-success-soft);
+        }
+
+        .catalog-icon-svg {
+            width: 22px;
+            height: 22px;
+            flex-shrink: 0;
+        }
+
+        .catalog-icon-label {
+            font-size: 9px;
+            font-family: 'Consolas', 'Monaco', monospace;
+            text-align: center;
+            line-height: 1.2;
+            word-break: break-all;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            line-clamp: 2;
+            -webkit-box-orient: vertical;
+        }
+
+        .catalog-icon-tooltip {
+            position: absolute;
+            bottom: calc(100% + 4px);
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--color-success-soft);
+            color: var(--color-gray-900);
+            font-size: 10px;
+            font-weight: 600;
+            padding: 2px 8px;
+            border-radius: 4px;
+            white-space: nowrap;
+            pointer-events: none;
+            animation: catalog-tooltip-in 0.15s ease-out;
+        }
+
+        .catalog-icon-item {
+            position: relative;
+        }
+
+        @keyframes catalog-tooltip-in {
+            from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+            to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+        }

package/lib/stub-player/styles/_catalog-panel.css

@@ -0,0 +1,291 @@
+        /* =====================================================================
+         * CATALOG PANEL
+         * Tabbed catalog of components, interactions, and assets
+         * ===================================================================== */
+
+        #stub-player-catalog-panel {
+            position: fixed;
+            top: 40px;
+            right: 0;
+            width: 480px;
+            max-width: 90vw;
+            height: calc(100% - 40px);
+            background: var(--color-primary);
+            color: var(--color-gray-200);
+            z-index: 999997;
+            display: none;
+            flex-direction: column;
+            font-size: 13px;
+            border-left: 1px solid var(--color-primary-panel);
+            transition: transform 0.2s ease;
+        }
+
+        #stub-player-catalog-panel.visible {
+            display: flex;
+        }
+
+        /* Header with tabs */
+        .catalog-header {
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid var(--color-primary-panel);
+            flex-shrink: 0;
+        }
+
+        .catalog-tabs {
+            display: flex;
+            flex: 1;
+            gap: 0;
+        }
+
+        .catalog-tab {
+            flex: 1;
+            padding: 10px 12px;
+            background: none;
+            border: none;
+            border-bottom: 2px solid transparent;
+            color: var(--color-gray-750);
+            font-size: 12px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.15s;
+            white-space: nowrap;
+        }
+
+        .catalog-tab:hover {
+            color: var(--color-gray-200);
+            background: rgba(74, 111, 165, 0.08);
+        }
+
+        .catalog-tab.active {
+            color: var(--color-info-soft);
+            border-bottom-color: var(--color-info);
+        }
+
+        .catalog-close-btn {
+            background: none;
+            border: none;
+            color: var(--color-gray-750);
+            cursor: pointer;
+            padding: 10px 14px;
+            font-size: 14px;
+            transition: color 0.15s;
+        }
+
+        .catalog-close-btn:hover {
+            color: var(--color-white);
+        }
+
+        /* Body / tab content */
+        .catalog-body {
+            flex: 1;
+            overflow-y: auto;
+            min-height: 0;
+        }
+
+        .catalog-tab-content {
+            display: none;
+            height: 100%;
+        }
+
+        .catalog-tab-content.active {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .catalog-loading {
+            padding: 32px;
+            text-align: center;
+            color: var(--color-gray-750);
+        }
+
+        .catalog-empty {
+            padding: 32px;
+            text-align: center;
+            color: var(--color-gray-750);
+        }
+
+        /* Item list */
+        .catalog-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 4px 0;
+        }
+
+        .catalog-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            cursor: pointer;
+            transition: background 0.1s;
+            border-left: 3px solid transparent;
+        }
+
+        .catalog-item:hover {
+            background: rgba(74, 111, 165, 0.1);
+        }
+
+        .catalog-item.selected {
+            background: rgba(74, 111, 165, 0.18);
+            border-left-color: var(--color-info);
+        }
+
+        .catalog-item-name {
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 12px;
+            font-weight: 500;
+            color: var(--color-gray-200);
+        }
+
+        .catalog-badge {
+            margin-left: auto;
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            background: rgba(74, 111, 165, 0.2);
+            color: var(--color-info-soft);
+            font-family: 'Consolas', 'Monaco', monospace;
+        }
+
+        .catalog-description {
+            margin-left: auto;
+            font-size: 11px;
+            color: var(--color-gray-750);
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        /* Asset groups */
+        .catalog-asset-group {
+            margin-bottom: 8px;
+        }
+
+        .catalog-asset-group-header {
+            padding: 8px 16px 4px;
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--color-info-soft);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .catalog-asset-file {
+            padding: 4px 16px 4px 28px;
+            font-size: 12px;
+            font-family: 'Consolas', 'Monaco', monospace;
+            color: var(--color-gray-600);
+        }
+
+        /* Drop zone */
+        .catalog-dropzone {
+            margin: 12px;
+            padding: 20px;
+            border: 2px dashed var(--color-primary-panel);
+            border-radius: 8px;
+            text-align: center;
+            color: var(--color-gray-750);
+            font-size: 12px;
+            transition: all 0.15s;
+            flex-shrink: 0;
+        }
+
+        .catalog-dropzone.dragover {
+            border-color: var(--color-info);
+            color: var(--color-info-soft);
+            background: rgba(74, 111, 165, 0.08);
+        }
+
+        .catalog-dropzone.uploading {
+            border-color: var(--color-success-soft);
+            color: var(--color-success-soft);
+        }
+
+        /* Preview pane */
+        .catalog-preview-pane {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: var(--color-primary);
+            display: flex;
+            flex-direction: column;
+            z-index: 2;
+        }
+
+        .catalog-preview-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 16px;
+            border-bottom: 1px solid var(--color-primary-panel);
+            font-weight: 600;
+            font-size: 14px;
+            color: var(--color-white);
+            flex-shrink: 0;
+        }
+
+        #catalog-preview-frame {
+            flex: 1;
+            border: none;
+            background: var(--color-white);
+            min-height: 200px;
+        }
+
+        .catalog-preview-code {
+            border-top: 1px solid var(--color-primary-panel);
+            max-height: 40%;
+            overflow-y: auto;
+            flex-shrink: 0;
+        }
+
+        .catalog-preview-code-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 6px 12px;
+            background: var(--color-primary-deep);
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--color-gray-750);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            position: sticky;
+            top: 0;
+        }
+
+        .catalog-copy-btn {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 14px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            transition: background 0.15s;
+        }
+
+        .catalog-copy-btn:hover {
+            background: rgba(74, 111, 165, 0.2);
+        }
+
+        #catalog-preview-code-block {
+            margin: 0;
+            padding: 12px;
+            background: var(--color-primary-deep);
+            font-size: 11px;
+            line-height: 1.6;
+            overflow-x: auto;
+            white-space: pre-wrap;
+            word-break: break-all;
+            color: var(--color-info-bright);
+            font-family: 'Consolas', 'Monaco', monospace;
+        }
+
+        #catalog-preview-code-block code {
+            color: inherit;
+            font-family: inherit;
+        }
+