Soundtrap Workspace Generator

Lesson Generator

Build a cleaner workspace page, import older lesson code, and optionally pair each step with a snapshot image.

0. Import Existing Lesson Code

Paste previously generated lesson HTML here to pull in the lesson URL, template link, visible and hidden steps, checklist items, snapshot URLs, and unlock password.

Existing Lesson HTML

1. Start Screen & Lesson

Lesson URL

Show Melody URL

Show a template link on the start screen

Template URL

Template Link Text

2. Sidebar Steps

Add groups of steps. Each line should be a label followed by a URL, like Overview https://vimeo.com/123.

Enable optional snapshot images for each step

When snapshots are on, each step group gets a second textarea. Put one image URL per line in the same order as the step lines above it.

3. Hidden Steps

Unlock Password

4. Checklist

Checklist Items

<div class="stg-embed-host"></div>
<script>
(function() {
    const host = document.currentScript.previousElementSibling;
    if (!host || host.dataset.stgMounted === "true") return;
    host.dataset.stgMounted = "true";

host.style.display = "block";
    host.style.width = "100%";

const shadow = host.shadowRoot || host.attachShadow({ mode: "open" });
    shadow.innerHTML = `
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <style>
            :host {
                display: block;
                width: 100%;
                height: min(100vh, 980px);
                min-height: 760px;
            }

.widget-root,
            .widget-root * {
                box-sizing: border-box;
                font-family: "Montserrat", sans-serif;
            }

.widget-root {
                position: relative;
                width: 100%;
                height: 100%;
                min-height: 760px;
                overflow: hidden;
                background-color: #121212;
                color: white;
            }

button,
            input,
            textarea {
                font: inherit;
            }

.drag-capture {
                position: absolute;
                inset: 0;
                display: none;
                z-index: 3999;
                background: transparent;
            }

.sidepanel {
                width: 280px;
                position: absolute;
                z-index: 3000;
                height: 100%;
                top: 0;
                right: -300px;
                background: linear-gradient(180deg, #1e0030 0%, #0f0018 100%);
                overflow-x: hidden;
                overflow-y: auto;
                transition: right 0.4s ease-in-out;
                text-align: left;
                padding: 20px;
                box-shadow: -5px 0 15px rgba(0,0,0,0.5);
                border-left: 1px solid #33105f;
            }

.sidepanel.panel-open { right: 0; }
            .sidepanel::-webkit-scrollbar { width: 6px; }
            .sidepanel::-webkit-scrollbar-thumb { background: #4a2b75; border-radius: 3px; }

.closebtn {
                position: absolute;
                top: 10px;
                right: 15px;
                font-size: 24px;
                color: #aaa;
                cursor: pointer;
                text-decoration: none;
                border: 0;
                background: transparent;
                line-height: 1;
                padding: 0;
            }

.closebtn:hover { color: white; }

.sidebar-tools {
                display: flex;
                justify-content: center;
                gap: 25px;
                margin-top: 40px;
                margin-bottom: 14px;
                padding-bottom: 15px;
                border-bottom: 1px solid rgba(255,255,255,0.1);
            }

.tool-action-btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-decoration: none;
                color: #aaa;
                cursor: pointer;
                transition: color 0.2s;
                border: 0;
                background: transparent;
            }

.tool-action-btn:hover { color: white; }
            .tool-action-btn span { font-size: 10px; margin-top: 5px; text-transform: uppercase; font-weight: bold; }

.tool-circle {
                background-color: #3b1f66;
                color: white;
                width: 45px;
                height: 45px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                transition: transform 0.2s, background-color 0.2s;
                box-shadow: 0 4px 6px rgba(0,0,0,0.2);
            }

.tool-action-btn:hover .tool-circle { background-color: #5d3fd3; transform: scale(1.1); }

.show-melody-btn {
                width: 100%;
                margin: 2px 0 12px;
                background: rgba(243, 156, 18, 0.16);
                border: 1px solid rgba(243, 156, 18, 0.55);
                border-left: 3px solid #f39c12;
                color: #fff;
                border-radius: 9px;
                padding: 11px 12px;
                text-align: left;
                font-size: 13px;
                font-weight: 700;
                cursor: pointer;
                transition: 0.2s;
            }

.show-melody-btn:hover {
                background: rgba(243, 156, 18, 0.25);
                transform: translateX(2px);
            }

.step-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                padding: 10px 12px;
                margin-bottom: 8px;
                border-radius: 10px;
                background: rgba(255, 255, 255, 0.04);
                border-left: 3px solid #5d3fd3;
                transition: transform 0.2s, background-color 0.2s;
            }

.step-row.type-modal { border-left-color: #5d3fd3; }
            .step-row.type-lightbox { border-left-color: #22b8cf; }
            .step-row.type-link { border-left-color: #2ecc71; }
            .step-row.type-iframe { border-left-color: #e67e22; }

.step-row:hover {
                background: rgba(255, 255, 255, 0.12);
                transform: translateX(3px);
            }

.step-main-btn {
                flex: 1;
                background: transparent;
                border: none;
                padding: 0;
                margin: 0;
                text-align: left;
                cursor: pointer;
                color: inherit;
                font: inherit;
                -webkit-tap-highlight-color: transparent;
            }

.step-main-btn:focus,
            .step-main-btn:active,
            .step-main-btn:focus-visible {
                outline: none;
                background: transparent;
                color: inherit;
            }

.step-title {
                font-size: 13px;
                font-weight: 700;
                color: #ececec;
                line-height: 1.2;
                display: block;
            }

.step-actions {
                display: flex;
                gap: 8px;
                align-items: center;
            }

.step-icon-btn {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 1px solid rgba(255, 255, 255, 0.28);
                background: rgba(255, 255, 255, 0.07);
                color: #ffffff;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
                font-size: 13px;
            }

.step-icon-btn:hover {
                transform: scale(1.08);
                border-color: rgba(255, 255, 255, 0.45);
            }

.step-icon-btn.video:hover,
            .step-icon-btn.modal:hover { background: #5132c7; }
            .step-icon-btn.iframe:hover { background: #d97706; }
            .step-icon-btn.link:hover { background: #15803d; }
            .step-icon-btn.camera:hover { background: #c07f0c; }

.step-icon-btn:disabled {
                opacity: 0.4;
                cursor: not-allowed;
                transform: none;
            }

.unlock-button {
                background-color: #5d3fd3;
                color: white;
                padding: 10px 20px;
                border: none;
                border-radius: 20px;
                cursor: pointer;
                margin: 20px auto;
                display: none;
                width: 100%;
                font-size: 14px;
                font-weight: bold;
                text-transform: uppercase;
                letter-spacing: 1px;
                transition: 0.3s;
            }

.unlock-button:hover { background-color: #7b5fe6; transform: translateY(-2px); }

.sidebar-footer-icons {
                display: flex;
                justify-content: space-around;
                margin-top: 30px;
                padding-top: 20px;
                border-top: 1px solid rgba(255,255,255,0.1);
            }

.footer-icon {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #aaa;
                text-decoration: none;
                font-size: 20px;
                transition: color 0.2s;
                cursor: pointer;
                border: 0;
                background: transparent;
            }

.footer-icon span { font-size: 10px; margin-top: 5px; text-transform: uppercase; font-weight: bold; }
            .footer-icon:hover { color: #f39c12; }

.iframe-container {
                position: relative;
                width: 100%;
                height: 100%;
                overflow: hidden;
                background-color: #121212;
            }

iframe {
                width: 100%;
                height: 100%;
                border: none;
                display: block;
                margin: 0;
                padding: 0;
            }

#customIframe { background-color: #ffffff; }

.openbtn {
                cursor: pointer;
                background-color: #19023C;
                border: none;
                border-radius: 50%;
                position: absolute;
                bottom: 30px;
                right: 30px;
                transition: 0.3s;
                z-index: 3002;
                padding: 15px;
                display: none;
                align-items: center;
                justify-content: center;
                width: 90px;
                height: 90px;
                box-shadow: 0 5px 20px rgba(0,0,0,0.6);
                pointer-events: auto;
            }

.openbtn:hover {
                transform: scale(1.1);
                background-color: #2a0463;
                box-shadow: 0 8px 25px rgba(0,0,0,0.7);
            }

.logo-image { width: 100%; height: auto; display: block; pointer-events: none; }

.overlay {
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, #19023C 0%, #3a0ca3 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 2000;
                padding: 20px;
            }

.overlay-card {
                background-color: white;
                color: #333;
                padding: 40px;
                border-radius: 16px;
                box-shadow: 0 20px 50px rgba(0,0,0,0.3);
                text-align: center;
                max-width: 600px;
                width: 100%;
            }

.overlay-card h2 {
                margin-top: 0;
                color: #19023C;
                font-size: 24px;
                margin-bottom: 25px;
                text-transform: uppercase;
                font-weight: 700;
            }

.overlay-input-group input {
                width: 100%;
                padding: 15px;
                font-size: 16px;
                border: 2px solid #ddd;
                border-radius: 8px;
                box-sizing: border-box;
                margin-bottom: 15px;
                outline: none;
                transition: 0.3s;
                color: #333;
            }

.overlay-input-group input:focus { border-color: #5d3fd3; }

.overlay-btn {
                background-color: #5d3fd3;
                color: white;
                border: none;
                padding: 15px 30px;
                font-size: 16px;
                border-radius: 30px;
                cursor: pointer;
                font-weight: bold;
                transition: 0.3s;
                width: 100%;
            }

.overlay-btn:hover { background-color: #462a9e; }

.helper-text {
                text-align: left;
                background-color: #f5f5f7;
                padding: 25px;
                border-radius: 8px;
                font-size: 14px;
                color: #555;
                line-height: 1.6;
            }

.helper-text strong { color: #19023C; display: block; margin-bottom: 5px; font-weight: 700; font-size: 15px; }
            .helper-text p { margin: 0 0 15px 0; }
            .helper-text ol { margin: 0; padding-left: 20px; }
            .helper-text li { margin-bottom: 5px; }

.template-link {
                margin-top: 15px;
                opacity: 0.6;
                font-size: 12px;
                cursor: pointer;
                text-decoration: underline;
                background: transparent;
                border: 0;
                color: #333;
                padding: 0;
            }

.bottombar {
                width: 100%;
                position: absolute;
                z-index: 100;
                bottom: -60vh;
                left: 0;
                background-color: rgba(20, 20, 20, 0.98);
                border-top: 2px solid #5d3fd3;
                overflow-y: auto;
                transition: bottom 0.4s ease-in-out;
                text-align: center;
                padding: 30px 20px;
                box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
                max-height: 50vh;
            }

.bottombar.panel-open { bottom: 0; }

.checklist-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
            .checklist-column { flex: 1; min-width: 250px; text-align: left; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; }
            .checklist-column label {
                display: block;
                padding: 8px 0;
                font-size: 16px;
                cursor: pointer;
                position: relative;
                padding-left: 35px;
                color: #eee;
                transition: 0.2s;
            }

.checklist-column label:hover { color: #fff; }
            .checklist-column input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
            .checklist-column label:before {
                content: "";
                display: inline-block;
                width: 20px;
                height: 20px;
                border: 2px solid #777;
                border-radius: 4px;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                transition: 0.2s;
            }

.checklist-column input:checked + label:before { border-color: #5d3fd3; background-color: #5d3fd3; }
            .checklist-column input:checked + label:after {
                content: "✔";
                position: absolute;
                left: 4px;
                top: 50%;
                transform: translateY(-50%);
                color: white;
                font-size: 14px;
            }

.hide-checklist {
                font-size: 14px;
                font-weight: bold;
                color: #bbb;
                cursor: pointer;
                display: inline-block;
                margin-top: 20px;
                border: 1px solid #555;
                padding: 8px 20px;
                border-radius: 20px;
                background: transparent;
            }

.closebottombar {
                font-size: 24px;
                cursor: pointer;
                background: none;
                color: #888;
                border: none;
                position: absolute;
                top: 15px;
                right: 20px;
            }

.common-modal {
                position: absolute;
                background-color: #ffffff;
                border-radius: 12px;
                box-shadow: 0 15px 50px rgba(0,0,0,0.5);
                display: none;
                flex-direction: column;
                overflow: hidden;
                user-select: none;
                min-width: 320px;
                min-height: 260px;
                z-index: 3050;
            }

#editorModal { left: 20%; top: 10%; width: 450px; height: 600px; border: 1px solid #d1d1d1; }
            #ytPlayerModal { right: 50px; bottom: 50px; width: 400px; height: 260px; background-color: #000; border: 1px solid #444; touch-action: none; }
            #videoModal { left: 14%; top: 10%; width: 72%; height: 74%; background: #0d0d0d; }
            #stepModal { left: 12%; top: 8%; width: 76%; height: 80%; min-width: 320px; min-height: 260px; }
            #showMelodyModal { left: 4%; top: 1%; width: 92%; height: 50%; min-width: 320px; min-height: 260px; background: #0d0d0d; border: 1px solid #f39c12; }

.modal-header {
                padding: 10px 15px;
                background-color: #19023C;
                color: white;
                cursor: move;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                font-weight: 600;
                touch-action: none;
            }

.modal-close-btn {
                background: none;
                border: none;
                color: #ccc;
                font-size: 18px;
                cursor: pointer;
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

.modal-body,
            .yt-body {
                flex: 1;
                width: 100%;
                height: 100%;
                position: relative;
                display: flex;
                margin: 0;
                padding: 0;
            }

.modal-body iframe,
            .yt-body iframe,
            .yt-body div { width: 100%; height: 100%; flex: 1; border: none; }

.yt-header-left {
                display: flex;
                align-items: center;
                gap: 8px;
            }

.yt-switch-btn {
                background: #f39c12;
                color: #19023C;
                border: none;
                padding: 4px 10px;
                border-radius: 12px;
                font-size: 11px;
                font-weight: bold;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 5px;
            }

.editor-inputs { padding: 15px; background: #f9f9f9; display: flex; gap: 10px; border-bottom: 1px solid #eee; }
            .editor-inputs input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 6px; outline: none; color: #333; }
            .editor-toolbar { padding: 8px 15px; background: #fff; border-bottom: 1px solid #eee; display: flex; gap: 6px; flex-wrap: wrap; }
            .toolbar-divider { width: 1px; height: 26px; background: #ddd; margin: 0 2px; }

.editor-btn {
                background: white;
                color: #555;
                border: 1px solid #ddd;
                width: 30px;
                height: 30px;
                border-radius: 4px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }

.editor-btn.active-tool { background: #5d3fd3; color: white; }
            .editor-btn.recording { background: #e74c3c; color: white; animation: pulse 1.5s infinite; }
            .editor-btn.dictating { background: #27ae60; color: white; animation: pulse 1.5s infinite; }
            .editor-content { flex: 1; padding: 20px; overflow-y: auto; outline: none; user-select: text; cursor: text; color: #333; line-height: 1.6; background: #fff; }
            .editor-footer { padding: 10px; background: #f9f9f9; text-align: right; position: relative; }

.export-btn {
                background: #5d3fd3;
                color: #fff;
                border: none;
                padding: 10px 14px;
                border-radius: 8px;
                cursor: pointer;
                font-weight: 600;
            }

.tools-panel { background: #f4f4f4; padding: 10px; display: none; }
            .tool-input { width: 100%; padding: 6px; border-radius: 15px; border: 1px solid #ddd; box-sizing: border-box; color: #333; }
            .tool-results { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; max-height: 80px; overflow-y: auto; }
            .word-tag { background: white; border: 1px solid #ddd; padding: 2px 8px; border-radius: 10px; font-size: 12px; cursor: pointer; }

.resizer {
                width: 15px;
                height: 15px;
                position: absolute;
                right: 2px;
                bottom: 2px;
                cursor: se-resize;
                border-bottom: 10px solid #5d3fd3;
                border-left: 10px solid transparent;
            }

#showMelodyHeader { background: linear-gradient(90deg, #8a5400, #f39c12); }
            #showMelodyResize { border-bottom-color: #f39c12; z-index: 4; }
            #videoResizeHandle { border-bottom-color: #f39c12; z-index: 4; }
            #stepResizeHandle { border-bottom-color: #5d3fd3; z-index: 4; }

.video-modal-body { flex: 1; background: #000; display: flex; }
            .video-modal-body iframe { width: 100%; height: 100%; border: 0; }

.step-modal-body {
                flex: 1;
                background: #101010;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 12px;
            }

.step-modal-body img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                border-radius: 8px;
            }

.step-modal-footer {
                padding: 10px 12px;
                background: #f9f9f9;
                border-top: 1px solid #ececec;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 8px;
            }

.step-nav-btn {
                background: #5d3fd3;
                color: #fff;
                border: none;
                padding: 8px 10px;
                border-radius: 8px;
                cursor: pointer;
                font-weight: 600;
                font-size: 12px;
            }

.step-nav-btn:hover { background: #7b5fe6; }

.step-label {
                color: #303030;
                font-size: 12px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

.grammar-list { text-align: left; max-height: 340px; overflow-y: auto; }
            .grammar-item { display: grid; grid-template-columns: auto auto auto 1fr; gap: 8px; padding: 8px 0; align-items: start; border-bottom: 1px solid #eee; }
            .grammar-error { color: #c0392b; font-weight: 700; }
            .grammar-fix { color: #2c7a4b; font-weight: 700; }
            .grammar-msg { color: #555; font-size: 13px; }

@keyframes pulse {
                0% { box-shadow: 0 0 0 0 rgba(231,76,60,0.7); }
                70% { box-shadow: 0 0 0 6px rgba(231,76,60,0); }
                100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); }
            }

@media (max-width: 900px) {
                :host {
                    height: min(100vh, 900px);
                    min-height: 680px;
                }

.overlay-card { padding: 24px; }
                .overlay-card h2 { font-size: 21px; }
                .checklist-column { min-width: 100%; }
                .editor-inputs { flex-direction: column; }
                .step-modal-footer { flex-wrap: wrap; }
            }
        </style>

<div id="mySidepanel" class="sidepanel">
                <button type="button" class="closebtn" aria-label="Close sidebar">×</button>
                <div class="sidebar-tools">
                    <button type="button" id="referenceBtn" class="tool-action-btn" title="Reference Track">
                        <div class="tool-circle"><i class="fa-solid fa-record-vinyl"></i></div><span>Reference</span>
                    </button>
                    <button type="button" id="notesBtn" class="tool-action-btn" title="Project Notes">
                        <div class="tool-circle"><i class="fa-solid fa-file-pen"></i></div><span>Notes</span>
                    </button>
                </div>

<button type="button" id="showMelodyBtn" class="show-melody-btn">Show Melody</button>
                <div id="stepsContainer" style="margin-bottom: 20px;"></div>
                <div id="hiddenContent" style="display:none;"><div id="hiddenStepsContainer"></div></div>
                <button class="unlock-button" id="unlockButton" type="button">Unlock</button>

<div class="sidebar-footer-icons">
                    <button class="footer-icon" id="checklistBtn" type="button" title="Checklist"><i class="fa-solid fa-list-check"></i><span>Checklist</span></button>
                    <button id="lessonBtn" type="button" class="footer-icon" title="Lesson"><i class="fa-solid fa-graduation-cap"></i><span>Lesson</span></button>
                </div>
            </div>

<div id="editorModal" class="common-modal">
                <div class="modal-header" id="editorHeader"><span><i class="fa-solid fa-file-pen"></i> Notes</span><button class="modal-close-btn" type="button" id="closeEditorBtn"><i class="fa-solid fa-xmark"></i></button></div>
                <div class="editor-inputs">
                    <input type="text" id="studentName" placeholder="Student Name">
                    <input type="text" id="projectName" placeholder="Project Name">
                </div>
                <div class="editor-toolbar">
                    <button class="editor-btn" type="button" data-format="bold"><strong>B</strong></button>
                    <button class="editor-btn" type="button" data-format="italic"><em>I</em></button>
                    <button class="editor-btn" type="button" data-format="underline"><u>U</u></button>
                    <div class="toolbar-divider"></div>
                    <button class="editor-btn tool-btn-icon" id="btnRhy" type="button"><i class="fa-solid fa-music"></i></button>
                    <button class="editor-btn tool-btn-icon" id="btnSyn" type="button"><i class="fa-solid fa-book-open"></i></button>
                    <div class="toolbar-divider"></div>
                    <button class="editor-btn" id="spellBtn" type="button"><i class="fa-solid fa-spell-check"></i></button>
                    <div class="toolbar-divider"></div>
                    <button class="editor-btn" id="btnMonitor" type="button"><i class="fa-solid fa-headphones"></i></button>
                    <button class="editor-btn" id="btnRecord" type="button"><i class="fa-solid fa-circle" style="color:#e74c3c;"></i></button>
                    <button class="editor-btn" id="btnDictate" type="button"><i class="fa-solid fa-microphone-lines"></i></button>
                    <button class="editor-btn" id="btnRedo" type="button" style="display:none;color:#c0392b;"><i class="fa-solid fa-trash"></i></button>
                </div>
                <div class="tools-panel" id="toolsPanel">
                    <input type="text" id="toolInput" class="tool-input" placeholder="Search...">
                    <div id="toolResults" class="tool-results"></div>
                </div>
                <div id="editorTextArea" class="editor-content" contenteditable="true" spellcheck="true"></div>
                <div class="editor-footer"><button class="export-btn" id="exportBtn" type="button">Export PDF</button><div class="resizer" id="resizeHandle"></div></div>
            </div>

<div id="ytPlayerModal" class="common-modal">
                <div class="modal-header" id="ytHeader"><div class="yt-header-left"><span>Reference</span><button id="ytFocusBtn" class="yt-switch-btn" type="button"><i class="fa-solid fa-play"></i> Listen</button></div><button class="modal-close-btn" id="closeYtBtn" type="button"><i class="fa-solid fa-xmark"></i></button></div>
                <div class="yt-body"><div id="ytPlayerDiv"></div></div>
            </div>

<div id="showMelodyModal" class="common-modal">
                <div class="modal-header" id="showMelodyHeader"><span id="showMelodyTitle"><i class="fa-solid fa-video"></i> Show Melody</span><button class="modal-close-btn" id="closeShowMelodyBtn" type="button"><i class="fa-solid fa-xmark"></i></button></div>
                <div class="video-modal-body"><iframe id="showMelodyIframe" src="" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
                <div class="resizer" id="showMelodyResize"></div>
            </div>

<div id="videoModal" class="common-modal">
                <div class="modal-header" id="videoHeader"><span id="videoModalTitle"><i class="fa-solid fa-video"></i> Step Video</span><button class="modal-close-btn" id="closeVideoBtn" type="button"><i class="fa-solid fa-xmark"></i></button></div>
                <div class="video-modal-body"><iframe id="videoModalFrame" src="" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
                <div class="resizer" id="videoResizeHandle"></div>
            </div>

<div id="stepModal" class="common-modal">
                <div class="modal-header" id="stepHeader"><span id="stepModalTitle"><i class="fa-solid fa-image"></i> Step Snapshot</span><button class="modal-close-btn" id="closeStepBtn" type="button"><i class="fa-solid fa-xmark"></i></button></div>
                <div class="step-modal-body"><img id="stepModalImage" src="" alt="Step snapshot"></div>
                <div class="step-modal-footer">
                    <button type="button" class="step-nav-btn" id="prevStepBtn"><i class="fa-solid fa-arrow-left"></i> Prev</button>
                    <span id="stepModalLabel" class="step-label"></span>
                    <button type="button" class="step-nav-btn" id="nextStepBtn">Next <i class="fa-solid fa-arrow-right"></i></button>
                </div>
                <div class="resizer" id="stepResizeHandle"></div>
            </div>

<div id="myBottombar" class="bottombar">
                <button class="closebottombar" id="closeChecklistBtn" type="button">×</button>
                <div class="checklist-container" id="checklistContainer"></div>
                <button class="hide-checklist" id="hideChecklistBtn" type="button">Hide Checklist</button>
            </div>

<div id="urlOverlay" class="overlay">
                <div class="overlay-card">
                    <h2>Open Your Soundtrap Project</h2>
                    <div class="overlay-input-group">
                        <input type="text" id="urlInput" placeholder="Paste Project Link Here...">
                        <button class="overlay-btn" id="loadProjectBtn" type="button">Load Studio</button>
                    </div>
                    <div class="helper-text">
                        <strong>First Time Here?</strong>
                        <p>Paste the project link your teacher shared with you.</p>
                        <strong>Returning to Work?</strong>
                        <ol>
                            <li>Go to your Soundtrap Profile.</li>
                            <li>Right-click the <b>Studio</b> button on your project.</li>
                            <li>Select <b>Copy Link Address</b>.</li>
                            <li>Paste it above.</li>
                        </ol>
                    </div>
                    <button type="button" id="templateLink" class="template-link"></button>
                </div>
            </div>

<div class="drag-capture" id="dragCapture"></div>
        </div>
    `;

const $ = (selector) => shadow.querySelector(selector);
    const ui = {
        root: $(".widget-root"),
        dragCapture: $("#dragCapture"),
        sidepanel: $("#mySidepanel"),
        closeNavBtn: $(".closebtn"),
        referenceBtn: $("#referenceBtn"),
        notesBtn: $("#notesBtn"),
        showMelodyBtn: $("#showMelodyBtn"),
        stepsContainer: $("#stepsContainer"),
        hiddenContent: $("#hiddenContent"),
        hiddenStepsContainer: $("#hiddenStepsContainer"),
        unlockButton: $("#unlockButton"),
        checklistBtn: $("#checklistBtn"),
        lessonBtn: $("#lessonBtn"),
        checklistBar: $("#myBottombar"),
        checklistContainer: $("#checklistContainer"),
        closeChecklistBtn: $("#closeChecklistBtn"),
        hideChecklistBtn: $("#hideChecklistBtn"),
        workspaceFrame: $("#customIframe"),
        openButton: $(".openbtn"),
        overlay: $("#urlOverlay"),
        projectUrlInput: $("#urlInput"),
        loadProjectBtn: $("#loadProjectBtn"),
        templateLink: $("#templateLink"),
        editorModal: $("#editorModal"),
        editorHeader: $("#editorHeader"),
        closeEditorBtn: $("#closeEditorBtn"),
        studentName: $("#studentName"),
        projectName: $("#projectName"),
        editorTextArea: $("#editorTextArea"),
        toolsPanel: $("#toolsPanel"),
        toolInput: $("#toolInput"),
        toolResults: $("#toolResults"),
        btnRhy: $("#btnRhy"),
        btnSyn: $("#btnSyn"),
        spellBtn: $("#spellBtn"),
        btnMonitor: $("#btnMonitor"),
        btnRecord: $("#btnRecord"),
        btnDictate: $("#btnDictate"),
        btnRedo: $("#btnRedo"),
        exportBtn: $("#exportBtn"),
        resizeHandle: $("#resizeHandle"),
        ytPlayerModal: $("#ytPlayerModal"),
        ytHeader: $("#ytHeader"),
        ytPlayerDiv: $("#ytPlayerDiv"),
        ytFocusBtn: $("#ytFocusBtn"),
        closeYtBtn: $("#closeYtBtn"),
        showMelodyModal: $("#showMelodyModal"),
        showMelodyHeader: $("#showMelodyHeader"),
        showMelodyTitle: $("#showMelodyTitle"),
        showMelodyIframe: $("#showMelodyIframe"),
        closeShowMelodyBtn: $("#closeShowMelodyBtn"),
        showMelodyResize: $("#showMelodyResize"),
        videoModal: $("#videoModal"),
        videoHeader: $("#videoHeader"),
        videoModalTitle: $("#videoModalTitle"),
        videoModalFrame: $("#videoModalFrame"),
        closeVideoBtn: $("#closeVideoBtn"),
        videoResizeHandle: $("#videoResizeHandle"),
        stepModal: $("#stepModal"),
        stepHeader: $("#stepHeader"),
        stepModalTitle: $("#stepModalTitle"),
        stepModalImage: $("#stepModalImage"),
        stepModalLabel: $("#stepModalLabel"),
        closeStepBtn: $("#closeStepBtn"),
        prevStepBtn: $("#prevStepBtn"),
        nextStepBtn: $("#nextStepBtn"),
        stepResizeHandle: $("#stepResizeHandle")
    };

const state = {
        hiddenUnlocked: false,
        activeStepIndex: 0,
        activeStepList: Array.isArray(LESSON_CONFIG.steps) ? LESSON_CONFIG.steps : [],
        activeTool: null,
        ytPlayer: null,
        audioCtx: null,
        mediaRec: null,
        mediaStream: null,
        audioChunks: [],
        audioUrl: null,
        audioObj: null,
        isRec: false,
        isDic: false,
        dicRec: null,
        zIndex: 3050
    };

function loadScript(url) {
        if (scriptCache[url]) return scriptCache[url];
        scriptCache[url] = new Promise((resolve, reject) => {
            const script = document.createElement("script");
            script.src = url;
            script.async = true;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
        return scriptCache[url];
    }

function ensureSwal() {
        if (window.Swal) return Promise.resolve(true);
        return loadScript("https://cdn.jsdelivr.net/npm/sweetalert2@11").then(() => true).catch(() => false);
    }

function ensurePdfLibs() {
        const jobs = [];
        if (!window.html2canvas) jobs.push(loadScript("https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"));
        if (!(window.jspdf && window.jspdf.jsPDF)) jobs.push(loadScript("https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"));
        return Promise.all(jobs);
    }

async function showMessage(title, text, icon) {
        if (await ensureSwal()) return window.Swal.fire(title, text, icon);
        alert(`${title}\n\n${text}`);
    }

async function promptInput(options) {
        if (await ensureSwal()) return window.Swal.fire(options);
        const value = prompt(options.inputPlaceholder || options.title || "Enter a value");
        return { isConfirmed: value !== null, value };
    }

function getRootWidth() { return Math.max(320, ui.root.clientWidth); }
    function getRootHeight() { return Math.max(320, ui.root.clientHeight); }

function bringToFront(panel) {
        state.zIndex += 1;
        panel.style.zIndex = String(state.zIndex);
    }

function setOverlayCapture(active, cursor) {
        ui.dragCapture.style.display = active ? "block" : "none";
        ui.dragCapture.style.cursor = cursor || "move";
    }

function closeNav() {
        ui.sidepanel.classList.remove("panel-open");
    }

function toggleNav() {
        ui.sidepanel.classList.toggle("panel-open");
    }

function toggleBottomBar(forceOpen) {
        if (typeof forceOpen === "boolean") ui.checklistBar.classList.toggle("panel-open", forceOpen);
        else ui.checklistBar.classList.toggle("panel-open");
    }

function hideOverlay() {
        ui.overlay.style.display = "none";
        ui.openButton.style.display = "flex";
    }

function getStepImageUrl(step) {
        return step.snapshotUrl || step.snapshot || step.imageUrl || step.image || "";
    }

function normalizeStepType(type) {
        if (type === "modal" || type === "iframe" || type === "link" || type === "lightbox") return type;
        return "lightbox";
    }

function getStepActionIcon(type) {
        if (type === "iframe") return "fa-solid fa-up-right-and-down-left-from-center";
        if (type === "link") return "fa-solid fa-arrow-up-right-from-square";
        return "fa-solid fa-video";
    }

function getStepActionClass(type) {
        if (type === "iframe") return "iframe";
        if (type === "link") return "link";
        if (type === "modal") return "modal";
        return "video";
    }

function renderChecklist() {
        ui.checklistContainer.innerHTML = "";
        const checklistItems = Array.isArray(LESSON_CONFIG.checklist) ? LESSON_CONFIG.checklist : [];
        const chunkSize = Math.ceil(checklistItems.length / 3) || 1;
        for (let i = 0; i < 3; i++) {
            const slice = checklistItems.slice(i * chunkSize, i * chunkSize + chunkSize);
            if (!slice.length) continue;
            ui.checklistContainer.appendChild(createChecklistColumn(slice, i));
        }
        loadChecklist();
    }

function createStepElement(step, index, sourceList, sourceIndex) {
        const type = normalizeStepType(step.type);
        const row = document.createElement("div");
        row.className = `step-row type-${type}`;

const mainBtn = document.createElement("button");
        mainBtn.type = "button";
        mainBtn.className = "step-main-btn";
        mainBtn.title = `${step.label} action`;
        mainBtn.addEventListener("click", () => performPrimaryAction(step, sourceIndex, sourceList));

const title = document.createElement("span");
        title.className = "step-title";
        title.textContent = `${index}. ${step.label}`;
        mainBtn.appendChild(title);

const actions = document.createElement("div");
        actions.className = "step-actions";

const imageBtn = document.createElement("button");
        imageBtn.type = "button";
        imageBtn.className = "step-icon-btn camera";
        imageBtn.title = `${step.label} snapshot`;
        imageBtn.innerHTML = '<i class="fa-solid fa-camera"></i>';
        imageBtn.addEventListener("click", (event) => {
            event.stopPropagation();
            openStepModal(sourceIndex, sourceList);
        });

if (!getStepImageUrl(step)) {
            imageBtn.disabled = true;
            imageBtn.title = "No snapshot assigned yet";
        }

actions.appendChild(primaryBtn);
        actions.appendChild(imageBtn);
        row.appendChild(mainBtn);
        row.appendChild(actions);
        return row;
    }

function renderLessonContent() {
        const templateUrl = LESSON_CONFIG.templateUrl || "";
        if (templateUrl) {
            ui.templateLink.style.display = "inline-block";
            ui.templateLink.textContent = LESSON_CONFIG.templateLabel || "Or open lesson template";
        } else {
            ui.templateLink.style.display = "none";
        }

ui.showMelodyBtn.style.display = SHOW_MELODY_URL ? "block" : "none";

let globalStepIndex = 1;
        ui.stepsContainer.innerHTML = "";
        (Array.isArray(LESSON_CONFIG.steps) ? LESSON_CONFIG.steps : []).forEach((step, idx) => {
            ui.stepsContainer.appendChild(createStepElement(step, globalStepIndex++, LESSON_CONFIG.steps, idx));
        });

ui.hiddenStepsContainer.innerHTML = "";
        const hiddenSteps = Array.isArray(LESSON_CONFIG.hiddenSteps) ? LESSON_CONFIG.hiddenSteps : [];
        if (hiddenSteps.length > 0) {
            ui.unlockButton.style.display = state.hiddenUnlocked ? "none" : "block";
            hiddenSteps.forEach((step, idx) => {
                ui.hiddenStepsContainer.appendChild(createStepElement(step, globalStepIndex++, hiddenSteps, idx));
            });
        } else {
            ui.unlockButton.style.display = "none";
        }

ui.hiddenContent.style.display = state.hiddenUnlocked ? "block" : "none";
        renderChecklist();
    }

function openVideoModal(index, list) {
        const sourceList = Array.isArray(list) ? list : LESSON_CONFIG.steps;
        const step = sourceList[index];
        if (!step || !step.url) return;
        closeStepModal();
        closeShowMelodyModal();
        ui.videoModalTitle.innerHTML = `<i class="fa-solid fa-video"></i> ${step.label} Video`;
        ui.videoModalFrame.src = toEmbedUrl(step.url);
        modalOpen(ui.videoModal, true);
        if (normalizeStepType(step.type) === "modal") positionVideoDocked();
        else positionVideoCentered();
    }

function closeVideoModal() {
        modalOpen(ui.videoModal, false);
        ui.videoModalFrame.src = "";
    }

function closeStepModal() {
        modalOpen(ui.stepModal, false);
        ui.stepModalImage.src = "";
    }

function showPrevStep() {
        if (!state.activeStepList || state.activeStepList.length === 0) return;
        const prevIndex = (state.activeStepIndex - 1 + state.activeStepList.length) % state.activeStepList.length;
        openStepModal(prevIndex, state.activeStepList);
    }

function showNextStep() {
        if (!state.activeStepList || state.activeStepList.length === 0) return;
        const nextIndex = (state.activeStepIndex + 1) % state.activeStepList.length;
        openStepModal(nextIndex, state.activeStepList);
    }

function openShowMelody() {
        if (!SHOW_MELODY_URL) return;
        closeNav();
        closeVideoModal();
        closeStepModal();
        ui.showMelodyTitle.innerHTML = '<i class="fa-solid fa-video"></i> Show Melody';
        ui.showMelodyIframe.src = toEmbedUrl(SHOW_MELODY_URL);
        modalOpen(ui.showMelodyModal, true);
        positionShowMelodyDefault();
    }

function closeShowMelodyModal() {
        modalOpen(ui.showMelodyModal, false);
        ui.showMelodyIframe.src = "";
    }

async function promptForPassword() {
        const response = await promptInput({
            title: "Enter Password",
            input: "password",
            inputPlaceholder: "Password",
            showCancelButton: true,
            confirmButtonColor: "#5d3fd3"
        });

if (!response.isConfirmed) return;
        if ((response.value || "") === unlockPassword) {
            state.hiddenUnlocked = true;
            ui.hiddenContent.style.display = "block";
            ui.unlockButton.style.display = "none";
        } else {
            showMessage("Incorrect", "That password didn't match.", "error");
        }
    }

function loadProject() {
        const value = ui.projectUrlInput.value.trim();
        if (!value) {
            showMessage("Error", "Paste a link first.", "error");
            return;
        }
        ui.workspaceFrame.src = value;
        hideOverlay();
    }

function loadTemplate() {
        if (!LESSON_CONFIG.templateUrl) return;
        ui.workspaceFrame.src = LESSON_CONFIG.templateUrl;
        hideOverlay();
    }

function autoSave() {
        localStorage.setItem(notesKey, JSON.stringify({
            s: ui.studentName.value,
            p: ui.projectName.value,
            c: ui.editorTextArea.innerHTML
        }));
    }

function loadSavedData() {
        const data = JSON.parse(localStorage.getItem(notesKey) || "null");
        if (!data) return;
        ui.studentName.value = data.s || "";
        ui.projectName.value = data.p || "";
        ui.editorTextArea.innerHTML = data.c || "";
    }

function closeEditor() {
        modalOpen(ui.editorModal, false);
        resetAudioUI();
    }

function formatText(command) {
        ui.editorTextArea.focus();
        document.execCommand(command, false, null);
    }

async function exportPDF() {
        try {
            await ensurePdfLibs();
            if (!(window.jspdf && window.jspdf.jsPDF)) throw new Error("missing");
            const { jsPDF } = window.jspdf;
            const doc = new jsPDF();
            const student = ui.studentName.value.trim() || "Student";
            const project = ui.projectName.value.trim() || "Project";
            doc.text(`Student: ${student}`, 10, 20);
            doc.text(`Project: ${project}`, 10, 30);
            await doc.html(ui.editorTextArea, {
                x: 10,
                y: 40,
                width: 180,
                windowWidth: 650,
                callback: (pdf) => pdf.save(`${student}_${project}.pdf`)
            });
        } catch (_error) {
            showMessage("Export failed", "PDF export could not be loaded.", "error");
        }
    }

async function toggleMonitor() {
        if (ui.btnMonitor.classList.contains("active-tool")) {
            if (state.audioCtx) await state.audioCtx.close();
            if (state.mediaStream) state.mediaStream.getTracks().forEach((track) => track.stop());
            state.audioCtx = null;
            state.mediaStream = null;
            ui.btnMonitor.classList.remove("active-tool");
            return;
        }

try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            state.mediaStream = stream;
            state.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            state.audioCtx.createMediaStreamSource(stream).connect(state.audioCtx.destination);
            ui.btnMonitor.classList.add("active-tool");
        } catch (_error) {
            showMessage("Error", "Mic denied", "error");
        }
    }

async function toggleRecord() {
        if (state.audioUrl) {
            if (state.audioObj && !state.audioObj.paused) {
                state.audioObj.pause();
                state.audioObj.currentTime = 0;
                ui.btnRecord.innerHTML = '<i class="fa-solid fa-play"></i>';
            } else {
                if (!state.audioObj) state.audioObj = new Audio(state.audioUrl);
                await state.audioObj.play();
                ui.btnRecord.innerHTML = '<i class="fa-solid fa-stop"></i>';
                state.audioObj.onended = () => { ui.btnRecord.innerHTML = '<i class="fa-solid fa-play"></i>'; };
            }
            return;
        }

if (state.isRec) {
            if (state.mediaRec) state.mediaRec.stop();
            state.isRec = false;
            ui.btnRecord.classList.remove("recording");
            ui.btnRecord.innerHTML = '<i class="fa-solid fa-play"></i>';
            ui.btnRedo.style.display = "flex";
            return;
        }

try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            state.audioChunks = [];
            state.mediaRec = new MediaRecorder(stream);
            state.mediaRec.ondataavailable = (event) => state.audioChunks.push(event.data);
            state.mediaRec.onstop = () => {
                state.audioUrl = URL.createObjectURL(new Blob(state.audioChunks, { type: "audio/webm" }));
                stream.getTracks().forEach((track) => track.stop());
            };
            state.mediaRec.start();
            state.isRec = true;
            ui.btnRecord.innerHTML = '<i class="fa-solid fa-square"></i>';
            ui.btnRecord.classList.add("recording");
        } catch (_error) {}
    }

function resetAudioUI() {
        if (state.mediaRec && state.isRec) state.mediaRec.stop();
        if (state.audioObj) state.audioObj.pause();
        if (state.audioCtx) state.audioCtx.close();
        if (state.mediaStream) state.mediaStream.getTracks().forEach((track) => track.stop());
        state.audioCtx = null;
        state.mediaRec = null;
        state.mediaStream = null;
        state.audioChunks = [];
        state.audioUrl = null;
        state.audioObj = null;
        state.isRec = false;
        ui.btnRecord.innerHTML = '<i class="fa-solid fa-circle" style="color:#e74c3c;"></i>';
        ui.btnRecord.classList.remove("recording");
        ui.btnRedo.style.display = "none";
        ui.btnMonitor.classList.remove("active-tool");
    }

function toggleTool(mode) {
        if (state.activeTool === mode) {
            state.activeTool = null;
            ui.toolsPanel.style.display = "none";
            ui.btnRhy.classList.remove("active-tool");
            ui.btnSyn.classList.remove("active-tool");
            return;
        }
        state.activeTool = mode;
        ui.toolsPanel.style.display = "block";
        ui.toolResults.innerHTML = "";
        ui.toolInput.placeholder = mode === "rhy" ? "Rhymes..." : "Synonyms...";
        ui.btnRhy.classList.toggle("active-tool", mode === "rhy");
        ui.btnSyn.classList.toggle("active-tool", mode === "syn");
        setTimeout(() => ui.toolInput.focus(), 50);
    }

async function searchWord() {
        const word = ui.toolInput.value.trim();
        if (!word || !state.activeTool) return;
        ui.toolResults.innerHTML = "...";
        try {
            const endpoint = state.activeTool === "rhy" ? "rel_rhy" : "rel_syn";
            const data = await (await fetch(`https://api.datamuse.com/words?${endpoint}=${encodeURIComponent(word)}`)).json();
            ui.toolResults.innerHTML = "";
            data.slice(0, 30).forEach((item) => {
                const chip = document.createElement("button");
                chip.type = "button";
                chip.className = "word-tag";
                chip.textContent = item.word;
                chip.addEventListener("click", () => {
                    ui.editorTextArea.focus();
                    document.execCommand("insertText", false, `${item.word} `);
                    autoSave();
                });
                ui.toolResults.appendChild(chip);
            });
        } catch (_error) {
            ui.toolResults.innerHTML = "";
        }
    }

async function promptYouTube() {
        closeNav();
        const response = await promptInput({
            title: "Reference Track",
            input: "text",
            inputPlaceholder: "YouTube URL...",
            showCancelButton: true
        });
        if (!response.isConfirmed || !response.value) return;
        const id = response.value.match(/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/);
        if (!(id && id[7] && id[7].length === 11)) {
            showMessage("Error", "Invalid URL", "error");
            return;
        }
        try {
            await ensureYouTube();
            modalOpen(ui.ytPlayerModal, true);
            positionYouTubeDefault();
            if (state.ytPlayer) {
                state.ytPlayer.cueVideoById(id[7]);
            } else {
                state.ytPlayer = new window.YT.Player(ui.ytPlayerDiv, {
                    height: "100%",
                    width: "100%",
                    videoId: id[7],
                    events: {
                        onStateChange: (event) => updFocus(event.data),
                        onReady: (event) => updFocus(event.target.getPlayerState())
                    }
                });
            }
        } catch (_error) {
            showMessage("Error", "YouTube player could not be loaded.", "error");
        }
    }

function closeYouTube() {
        modalOpen(ui.ytPlayerModal, false);
        if (state.ytPlayer) state.ytPlayer.stopVideo();
    }

function handleResize() {
        clampPanel(ui.editorModal);
        clampPanel(ui.videoModal);
        clampPanel(ui.stepModal);
        clampPanel(ui.ytPlayerModal);
        clampPanel(ui.showMelodyModal);
    }

ui.closeNavBtn.addEventListener("click", closeNav);
    ui.referenceBtn.addEventListener("click", promptYouTube);
    ui.notesBtn.addEventListener("click", openEditor);
    ui.showMelodyBtn.addEventListener("click", openShowMelody);
    ui.unlockButton.addEventListener("click", promptForPassword);
    ui.checklistBtn.addEventListener("click", () => toggleBottomBar());
    ui.lessonBtn.addEventListener("click", () => {
        if (LESSON_CONFIG.lessonUrl) window.open(LESSON_CONFIG.lessonUrl, "_blank", "noopener");
    });
    ui.closeChecklistBtn.addEventListener("click", () => toggleBottomBar(false));
    ui.hideChecklistBtn.addEventListener("click", () => toggleBottomBar(false));
    ui.openButton.addEventListener("click", toggleNav);
    ui.loadProjectBtn.addEventListener("click", loadProject);
    ui.projectUrlInput.addEventListener("keydown", (event) => {
        if (event.key === "Enter") loadProject();
    });
    ui.templateLink.addEventListener("click", loadTemplate);
    ui.closeEditorBtn.addEventListener("click", closeEditor);
    ui.closeYtBtn.addEventListener("click", closeYouTube);
    ui.ytFocusBtn.addEventListener("click", toggleFocusMode);
    ui.closeShowMelodyBtn.addEventListener("click", closeShowMelodyModal);
    ui.closeVideoBtn.addEventListener("click", closeVideoModal);
    ui.closeStepBtn.addEventListener("click", closeStepModal);
    ui.prevStepBtn.addEventListener("click", showPrevStep);
    ui.nextStepBtn.addEventListener("click", showNextStep);
    ui.studentName.addEventListener("input", autoSave);
    ui.projectName.addEventListener("input", autoSave);
    ui.editorTextArea.addEventListener("input", autoSave);
    ui.exportBtn.addEventListener("click", exportPDF);
    ui.btnRhy.addEventListener("click", () => toggleTool("rhy"));
    ui.btnSyn.addEventListener("click", () => toggleTool("syn"));
    ui.spellBtn.addEventListener("click", checkSpelling);
    ui.btnMonitor.addEventListener("click", toggleMonitor);
    ui.btnRecord.addEventListener("click", toggleRecord);
    ui.btnDictate.addEventListener("click", toggleVoiceToText);
    ui.btnRedo.addEventListener("click", resetAudioUI);
    ui.toolInput.addEventListener("keypress", (event) => {
        if (event.key === "Enter") searchWord();
    });

shadow.querySelectorAll("[data-format]").forEach((button) => {
        button.addEventListener("click", () => formatText(button.dataset.format));
    });

[ui.editorModal, ui.ytPlayerModal, ui.showMelodyModal, ui.videoModal, ui.stepModal].forEach((panel) => {
        panel.addEventListener("pointerdown", () => bringToFront(panel));
    });

makeDraggable(ui.editorHeader, ui.editorModal);
    makeDraggable(ui.ytHeader, ui.ytPlayerModal);
    makeDraggable(ui.showMelodyHeader, ui.showMelodyModal);
    makeDraggable(ui.videoHeader, ui.videoModal);
    makeDraggable(ui.stepHeader, ui.stepModal);
    makeResizable(ui.resizeHandle, ui.editorModal, 320, 260);
    makeResizable(ui.showMelodyResize, ui.showMelodyModal, 320, 260);
    makeResizable(ui.videoResizeHandle, ui.videoModal, 320, 220);
    makeResizable(ui.stepResizeHandle, ui.stepModal, 320, 260);

renderLessonContent();
    loadSavedData();
    ui.overlay.style.display = "flex";
    ui.projectUrlInput.focus();
    window.addEventListener("keydown", handleGlobalKeydown);
    window.addEventListener("resize", handleResize);
})();
</script>