coursecode 0.1.0

package/lib/stub-player/styles/_header-bar.css

@@ -0,0 +1,343 @@
+        /* Header bar */
+        #stub-player-header {
+            --toolbar-btn-text: var(--color-info-muted);
+            --toolbar-btn-border: color-mix(in srgb, var(--color-info-soft) 28%, transparent);
+            --toolbar-btn-hover-bg: color-mix(in srgb, var(--color-warning) 12%, transparent);
+            --toolbar-btn-hover-border: color-mix(in srgb, var(--color-warning) 38%, transparent);
+            --toolbar-btn-hover-text: var(--color-warning-bright);
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 40px;
+            background: var(--color-primary);
+            color: var(--color-white);
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            gap: 12px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+            z-index: 999999;
+            font-size: 13px;
+            transition: all 0.2s ease;
+        }
+
+        #stub-player-header.collapsed {
+            width: 40px;
+            height: 40px;
+            right: auto;
+            left: auto;
+            top: 8px;
+            right: 8px;
+            left: unset;
+            border-radius: 8px;
+            padding: 0;
+            justify-content: center;
+        }
+
+        #stub-player-header.collapsed .header-content {
+            display: none;
+        }
+
+        #stub-player-header .toggle-btn {
+            background: transparent;
+            border: 1px solid transparent;
+            color: var(--toolbar-btn-text);
+            cursor: pointer;
+            width: 28px;
+            height: 28px;
+            padding: 0;
+            border-radius: 6px;
+            font-size: 0;
+            line-height: 0;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.15s, border-color 0.15s;
+            flex-shrink: 0;
+        }
+
+        #stub-player-header .toggle-btn:hover {
+            background: var(--toolbar-btn-hover-bg);
+            border-color: var(--toolbar-btn-hover-border);
+            color: var(--toolbar-btn-hover-text);
+        }
+
+        #stub-player-header .toggle-btn .header-icon {
+            width: 14px;
+            height: 14px;
+            display: block;
+            transform: translate(0, 0);
+        }
+
+        #stub-player-header.collapsed .toggle-btn {
+            width: 30px;
+            height: 30px;
+            border-radius: 6px;
+            background: transparent;
+            border-color: transparent;
+            color: var(--color-info-soft);
+        }
+
+
+
+        #stub-player-header-error-badge-inline {
+            display: none;
+            background: var(--color-danger);
+            color: var(--color-white);
+            font-size: 10px;
+            font-weight: 600;
+            padding: 1px 5px;
+            border-radius: 10px;
+            margin-left: 6px;
+            min-width: 16px;
+            text-align: center;
+        }
+
+        #stub-player-header-error-badge-inline.has-warnings {
+            background: var(--color-warning);
+        }
+
+        #stub-player-header-error-badge-inline.visible {
+            display: inline-block;
+        }
+
+        #stub-player-header .header-content {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            flex: 1;
+        }
+
+        #stub-player-header .label {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-weight: 600;
+            color: var(--color-white);
+            white-space: nowrap;
+        }
+
+        #stub-player-header .slide-id-badge {
+            background: var(--color-primary-panel);
+            color: var(--color-info-soft);
+            padding: 2px 8px 2px 10px;
+            border-radius: 4px;
+            font-size: 11px;
+            font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+            letter-spacing: 0.3px;
+        }
+
+        #stub-player-header .slide-id-badge:empty {
+            display: none;
+        }
+
+        #stub-player-header.hide-slide-id .slide-id-badge {
+            display: none !important;
+        }
+
+        #stub-player-header .spacer {
+            flex: 1;
+        }
+
+        #stub-player-header button {
+            background: transparent;
+            color: var(--toolbar-btn-text);
+            border: 1px solid var(--toolbar-btn-border);
+            padding: 5px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 12px;
+            transition: background 0.15s, color 0.15s, border-color 0.15s;
+            white-space: nowrap;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        #stub-player-header button:hover {
+            background: var(--toolbar-btn-hover-bg);
+            border-color: var(--toolbar-btn-hover-border);
+            color: var(--toolbar-btn-hover-text);
+        }
+
+        /* Keep top-row actions visually even (Edit/Review/Debug/More). */
+        #stub-player-header .header-content > button,
+        #stub-player-header .header-content > .more-menu-wrap > #stub-player-more-btn {
+            min-width: 78px;
+            justify-content: center;
+        }
+
+        #stub-player-header button.danger {
+            border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
+            color: var(--color-danger-soft);
+        }
+
+        #stub-player-header button.danger:hover {
+            background: color-mix(in srgb, var(--color-danger) 18%, transparent);
+            border-color: color-mix(in srgb, var(--color-danger) 70%, transparent);
+            color: color-mix(in srgb, var(--color-danger) 42%, var(--color-white));
+        }
+
+        #stub-player-header .checkbox-label {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            cursor: pointer;
+            user-select: none;
+            font-size: 12px;
+            white-space: nowrap;
+        }
+
+        #stub-player-header input[type="checkbox"] {
+            width: 13px;
+            height: 13px;
+            cursor: pointer;
+        }
+
+        #stub-player-header .divider {
+            width: 1px;
+            height: 20px;
+            background: var(--color-info);
+        }
+
+        #stub-player-header .more-menu-wrap {
+            position: relative;
+        }
+
+        #stub-player-header .more-menu {
+            display: none;
+            position: absolute;
+            top: calc(100% + 8px);
+            right: 0;
+            min-width: 210px;
+            background: var(--color-primary-surface);
+            border: 1px solid var(--color-info);
+            border-radius: 8px;
+            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
+            padding: 6px;
+            z-index: 1000000;
+        }
+
+        #stub-player-header .more-menu.visible {
+            display: block;
+        }
+
+        #stub-player-header .more-menu .menu-item {
+            width: 100%;
+            text-align: left;
+            background: transparent;
+            border: 1px solid transparent;
+            border-radius: 6px;
+            padding: 7px 8px;
+            margin: 0;
+            justify-content: flex-start;
+            color: var(--color-info-muted);
+        }
+
+        #stub-player-header .more-menu .menu-item:hover {
+            background: var(--color-primary-panel);
+        }
+
+        #stub-player-header .more-menu .menu-divider {
+            height: 1px;
+            margin: 6px 2px;
+            background: var(--color-info-border);
+        }
+
+        #stub-player-header .more-menu .menu-toggle-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+            color: var(--color-info-muted);
+            padding: 7px 8px;
+            border-radius: 6px;
+            font-size: 12px;
+        }
+
+        #stub-player-header .more-menu .menu-toggle-row:hover {
+            background: var(--color-primary-panel);
+        }
+
+        #stub-player-header .more-menu .menu-toggle-label-wrap {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            min-width: 0;
+        }
+
+        #stub-player-header .more-menu .menu-toggle-input {
+            position: absolute;
+            opacity: 0;
+            width: 0;
+            height: 0;
+            pointer-events: none;
+        }
+
+        #stub-player-header .more-menu .config-toggle {
+            padding: 0;
+            border: none;
+            border-radius: 8px;
+            background: var(--color-primary-panel);
+            margin: 0;
+            flex-shrink: 0;
+        }
+
+        #stub-player-header .more-menu .config-toggle.on {
+            background: var(--color-success);
+        }
+
+        #stub-player-header .header-icon {
+            width: 14px;
+            height: 14px;
+            flex-shrink: 0;
+            color: currentColor;
+        }
+
+        #stub-player-header .header-logo {
+            width: 20px;
+            height: 14px;
+            flex-shrink: 0;
+            color: var(--color-white);
+        }
+
+        #stub-player-header .menu-icon {
+            width: 14px;
+            height: 14px;
+            color: var(--color-info-muted);
+        }
+
+        /* Course iframe - below header */
+        #stub-player-course-frame {
+            position: fixed;
+            top: 40px;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: calc(100% - 40px);
+            border: none;
+            transition: top 0.2s, height 0.2s;
+        }
+
+        #stub-player-course-frame.header-collapsed {
+            top: 0;
+            height: 100%;
+        }
+
+        /* Responsive: icon-only mode on narrow viewports */
+        @media (max-width: 820px) {
+            #stub-player-header .btn-label {
+                display: none;
+            }
+            #stub-player-header {
+                gap: 6px;
+            }
+            #stub-player-header .header-content {
+                gap: 6px;
+            }
+            #stub-player-header button {
+                padding: 5px 7px;
+            }
+        }

package/lib/stub-player/styles/_interaction-editor.css

@@ -0,0 +1,140 @@
+        /* =====================================================================
+         * INTERACTION EDITOR MODAL - Popup for editing interactions
+         * ===================================================================== */
+        .interaction-editor-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.75);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999998;
+        }
+
+        .interaction-editor-overlay.visible {
+            display: flex;
+        }
+
+        .interaction-editor-modal {
+            background: var(--color-primary);
+            border-radius: 12px;
+            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+            width: 520px;
+            max-width: 90vw;
+            max-height: 85vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .interaction-editor-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px 20px;
+            background: var(--color-primary-deep);
+            border-bottom: 1px solid var(--color-primary-panel);
+            flex-shrink: 0;
+        }
+
+        .interaction-editor-title {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .interaction-editor-title .interaction-type-badge {
+            background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-bright) 100%);
+            color: var(--color-black);
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 11px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .interaction-editor-title .interaction-id-text {
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 13px;
+            color: var(--color-info-soft);
+        }
+
+        .interaction-editor-close {
+            background: none;
+            border: none;
+            color: var(--color-gray-750);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+            transition: color 0.15s;
+        }
+
+        .interaction-editor-close:hover {
+            color: var(--color-white);
+        }
+
+        .interaction-editor-body {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+        }
+
+        /* Override edit-form styles for modal context */
+        .interaction-editor-body .edit-form {
+            margin-top: 0;
+            padding-top: 0;
+            border-top: none;
+        }
+
+        /* Hide the inline save/cancel buttons - we use footer buttons */
+        .interaction-editor-body .edit-actions {
+            display: none;
+        }
+
+        .interaction-editor-footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: 12px;
+            padding: 16px 20px;
+            background: var(--color-primary-deep);
+            border-top: 1px solid var(--color-primary-panel);
+            flex-shrink: 0;
+        }
+
+        .interaction-editor-cancel {
+            background: var(--color-primary-panel);
+            border: none;
+            color: var(--color-gray-200);
+            padding: 10px 20px;
+            border-radius: 6px;
+            font-size: 13px;
+            cursor: pointer;
+            transition: background 0.15s;
+        }
+
+        .interaction-editor-cancel:hover {
+            background: var(--color-info-border);
+        }
+
+        .interaction-editor-save {
+            background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-bright) 100%);
+            border: none;
+            color: var(--color-black);
+            padding: 10px 20px;
+            border-radius: 6px;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: filter 0.15s;
+        }
+
+        .interaction-editor-save:hover {
+            filter: brightness(1.1);
+        }
+
+        .interaction-editor-save:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+