Reduce asset size

src/main/resources/static/css/styles.css

@@ -322,6 +322,12 @@ body {
     border-color: rgba(148, 163, 184, 0.2);
 }
 
+.badge.soft {
+    background: rgba(59, 130, 246, 0.12);
+    color: #bfdbfe;
+    border-color: rgba(59, 130, 246, 0.26);
+}
+
 .badge.danger {
     background: rgba(248, 113, 113, 0.12);
     color: #fecdd3;
@@ -399,30 +405,38 @@ body {
                 #0f172a;
 }
 
-.admin-shell {
+.admin-frame {
-    max-width: 1200px;
-    width: 100%;
     margin: 0 auto;
-    padding: 28px 18px 56px;
     display: flex;
     flex-direction: column;
-    gap: 18px;
+    width: 100%;
+    height: 100vh;
 }
 
-.admin-header {
+.admin-topbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 16px;
+    gap: 14px;
-    padding: 18px 22px;
+    padding: 10px 12px;
-    background: rgba(15, 23, 42, 0.92);
+    background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(12, 20, 34, 0.9));
-    border: 1px solid #1f2937;
+    border-bottom: 1px solid #1f2937;
-    border-radius: 16px;
+    border-radius: 0;
-    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
 }
 
-.admin-header h1 {
+.topbar-left {
-    margin: 6px 0 8px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.status-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: radial-gradient(circle, #22c55e 0%, #14532d 70%);
+    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.15);
 }
 
 .admin-identity {
@@ -432,6 +446,69 @@ body {
     flex-direction: column;
 }
 
+.admin-identity h1 {
+    margin: 2px 0 4px;
+}
+
+.admin-workspace {
+    --sidebar-width: 300px;
+    display: grid;
+    height: 100%;
+    grid-template-columns: var(--sidebar-width) 1fr;
+    gap: 12px;
+    align-items: stretch;
+    position: relative;
+}
+
+.admin-rail {
+    background: rgba(11, 18, 32, 0.92);
+    border-right: 1px solid #1f2937;
+    padding: 10px 10px 12px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 18px 45px rgba(0, 0, 0, 0.4);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.rail-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.rail-body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+    min-height: 0;
+}
+
+.rail-scroll {
+    overflow-y: auto;
+    padding-right: 2px;
+    flex: 1;
+    min-height: 0;
+}
+
+.canvas-stack {
+    background: linear-gradient(180deg, rgba(10, 15, 26, 0.95), rgba(12, 17, 30, 0.96));
+    border-radius: 16px;
+    padding: 12px 12px 14px;
+    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-height: 72vh;
+}
+
+.canvas-surface {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    height: 100%;
+}
+
 .header-actions.tight {
     gap: 8px;
 }
@@ -651,6 +728,27 @@ body {
     }
 }
 
+@media (max-width: 1200px) {
+    .admin-workspace {
+        grid-template-columns: 1fr;
+    }
+
+    .admin-rail {
+        max-width: 520px;
+    }
+
+    .rail-inspector {
+        position: static;
+        width: 100%;
+        max-height: none;
+    }
+
+    .overlay {
+        min-height: 520px;
+        height: 60vh;
+    }
+}
+
 .controls ul {
     list-style: none;
     padding: 0;
@@ -664,23 +762,17 @@ body {
 .overlay {
     position: relative;
     flex: 1;
-    min-height: 520px;
+    min-height: clamp(520px, 72vh, 980px);
-    height: calc(100vh - 220px);
+    height: 100%;
-    background: black;
+    background: radial-gradient(circle at 18% 20%, rgba(59, 130, 246, 0.08), transparent 38%),
+                radial-gradient(circle at 80% 0%, rgba(124, 58, 237, 0.08), transparent 40%),
+                #0b1220;
     overflow: hidden;
     border: 1px solid #1f2937;
     border-radius: 16px;
     box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45);
-}
+    display: grid;
-
+    place-items: center;
-.overlay iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: none;
-    filter: brightness(0.35) saturate(0.7);
 }
 
 .overlay canvas {
@@ -691,6 +783,13 @@ body {
     z-index: 2;
 }
 
+#admin-canvas {
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    border-radius: 10px;
+    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.5), 0 16px 45px rgba(0, 0, 0, 0.55);
+    background-color: rgba(255, 0, 255, 0.1);
+}
+
 .broadcast-body canvas {
     position: absolute;
     top: 0;
@@ -718,6 +817,106 @@ body {
     display: none;
 }
 
+.panel-title {
+    margin: 4px 0 0;
+    font-size: 18px;
+    color: #e5e7eb;
+}
+
+.panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 10px;
+}
+
+.canvas-panel {
+    padding: 18px 18px 20px;
+    margin-top: 0;
+}
+
+.canvas-topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 14px;
+}
+
+.canvas-meta {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.canvas-stage {
+    margin-top: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.canvas-boundary {
+    background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
+                      linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
+    background-size: 24px 24px;
+    position: relative;
+    isolation: isolate;
+}
+
+.canvas-boundary::after {
+    content: "";
+    position: absolute;
+    border-radius: 12px;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 16px 40px rgba(0, 0, 0, 0.35);
+}
+
+.canvas-guides {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.canvas-footnote {
+    color: #94a3b8;
+    font-size: 13px;
+    margin: 0 4px;
+}
+
+.rail-inspector {
+    margin-top: auto;
+    background: rgba(10, 14, 24, 0.96);
+    border: 1px solid rgba(124, 58, 237, 0.45);
+    border-radius: 12px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 16px 40px rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(4px);
+    padding: 10px 10px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 48vh;
+    overflow: hidden;
+}
+
+.rail-inspector .panel-section {
+    margin-top: 4px;
+    overflow-y: auto;
+    padding-right: 4px;
+    max-height: calc(48vh - 72px);
+}
+
+.drawer-header {
+    padding: 4px 2px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.control-panel {
+    margin-top: 0;
+}
+
 .asset-settings {
     background: radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.08), transparent 40%),
                 radial-gradient(circle at 85% 0%, rgba(59, 130, 246, 0.06), transparent 45%),
@@ -727,9 +926,10 @@ body {
 
 .panel-header {
     display: flex;
+    align-items: center;
     justify-content: space-between;
-    align-items: baseline;
     gap: 12px;
+    margin-bottom: 10px;
 }
 
 .panel-header h4 {
@@ -756,15 +956,15 @@ body {
 }
 
 .asset-controls-placeholder {
-    margin-top: 12px;
+    margin-top: 8px;
 }
 
 .selected-asset-banner {
     display: grid;
     grid-template-columns: 1fr auto;
-    gap: 12px;
+    gap: 10px;
-    padding: 14px;
+    padding: 10px;
-    border-radius: 12px;
+    border-radius: 10px;
     background: rgba(255, 255, 255, 0.02);
     border: 1px solid rgba(124, 58, 237, 0.2);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -774,7 +974,8 @@ body {
     display: flex;
     flex-direction: column;
     gap: 6px;
-    width: 328px;
+    width: 100%;
+    min-width: 0;
 }
 
 .selected-asset-actions {
@@ -797,7 +998,7 @@ body {
     display: flex;
     align-items: center;
     gap: 10px;
-    margin: 12px 0 4px;
+    margin: 8px 0 2px;
 }
 
 .file-input-field {
@@ -921,20 +1122,24 @@ body {
 .asset-list {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 6px;
-    margin-top: 12px;
+    margin-top: 6px;
+    padding: 0;
 }
 
 .asset-item {
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    padding: 10px 12px;
+    padding: 8px 10px;
-    border-radius: 10px;
+    border-radius: 9px;
     background: #111827;
     border: 1px solid #1f2937;
     cursor: pointer;
-    gap: 10px;
+    gap: 8px;
+    font-size: 13px;
+    line-height: 1.35;
+    height: 60px;
 }
 
 .asset-item.selected {
@@ -957,7 +1162,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 12px;
+    gap: 10px;
 }
 
 .asset-row .meta {
@@ -976,7 +1181,7 @@ body {
 
 .asset-item .actions {
     display: flex;
-    gap: 8px;
+    gap: 6px;
 }
 
 .asset-inspector .selected-asset-actions .icon-button,
@@ -1029,8 +1234,8 @@ body {
 }
 
 .asset-preview {
-    width: 64px;
+    width: 38px;
-    height: 64px;
+    height: 38px;
     object-fit: contain;
     background: #0b1220;
     border: 1px solid #1f2937;

src/main/resources/static/js/admin.js

@@ -2,7 +2,6 @@ let stompClient;
 const canvas = document.getElementById('admin-canvas');
 const ctx = canvas.getContext('2d');
 const overlay = document.getElementById('admin-overlay');
-const overlayFrame = overlay?.querySelector('iframe');
 let canvasSettings = { width: 1920, height: 1080 };
 canvas.width = canvasSettings.width;
 canvas.height = canvasSettings.height;
@@ -56,6 +55,8 @@ const selectedAssetIdLabel = document.getElementById('selected-asset-id');
 const selectedAssetBadges = document.getElementById('selected-asset-badges');
 const selectedVisibilityBtn = document.getElementById('selected-asset-visibility');
 const selectedDeleteBtn = document.getElementById('selected-asset-delete');
+const canvasResolutionLabel = document.getElementById('canvas-resolution');
+const canvasScaleLabel = document.getElementById('canvas-scale');
 const aspectLockState = new Map();
 const commitSizeChange = debounce(() => applyTransformFromInputs(), 180);
 const audioUnlockEvents = ['pointerdown', 'keydown', 'touchstart'];
@@ -308,11 +309,11 @@ function resizeCanvas() {
     canvas.style.height = `${displayHeight}px`;
     canvas.style.left = `${(bounds.width - displayWidth) / 2}px`;
     canvas.style.top = `${(bounds.height - displayHeight) / 2}px`;
-    if (overlayFrame) {
+    if (canvasResolutionLabel) {
-        overlayFrame.style.width = `${displayWidth}px`;
+        canvasResolutionLabel.textContent = `${canvasSettings.width} x ${canvasSettings.height}`;
-        overlayFrame.style.height = `${displayHeight}px`;
+    }
-        overlayFrame.style.left = `${(bounds.width - displayWidth) / 2}px`;
+    if (canvasScaleLabel) {
-        overlayFrame.style.top = `${(bounds.height - displayHeight) / 2}px`;
+        canvasScaleLabel.textContent = `${Math.round(scale * 100)}%`;
     }
     requestDraw();
 }

src/main/resources/templates/admin.html

@@ -10,162 +10,198 @@
     <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
 </head>
 <body class="admin-body">
-<div class="admin-layout">
+<div class="admin-frame">
-    <div class="admin-shell">
+    <header class="admin-topbar">
-        <header class="admin-header">
+        <div class="topbar-left">
+            <span class="status-dot" aria-hidden="true"></span>
             <div class="admin-identity">
+                <p class="eyebrow subtle">Admin</p>
                 <h1 th:text="${broadcaster}"></h1>
             </div>
-            <div class="header-actions horizontal">
+        </div>
-                <a class="icon-button" th:href="@{/}" title="Back to dashboard">
+        <div class="header-actions horizontal">
-                    <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
+            <a class="icon-button" th:href="@{/}" title="Back to dashboard">
-                    <span class="sr-only">Back to dashboard</span>
+                <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
-                </a>
+                <span class="sr-only">Back to dashboard</span>
-                <a class="button ghost" th:href="${'/view/' + broadcaster + '/broadcast'}" target="_blank" rel="noopener">Broadcaster view</a>
+            </a>
+            <a class="button ghost" th:href="${'/view/' + broadcaster + '/broadcast'}" target="_blank" rel="noopener">Broadcaster view</a>
+        </div>
+    </header>
+
+    <div class="admin-workspace">
+        <aside class="admin-rail">
+            <div class="rail-header">
+                <div>
+                    <p class="eyebrow subtle">Assets</p>
+                    <h3 class="panel-title">Library & uploads</h3>
+                </div>
             </div>
-        </header>
+            <div class="upload-row">
-        <section class="overlay" id="admin-overlay">
+                <input id="asset-file" class="file-input-field" type="file" accept="image/*,video/*,audio/*" onchange="handleFileSelection(this)" />
-            <iframe th:src="${'https://player.twitch.tv/?channel=' + broadcaster + '&parent=localhost'}" allowfullscreen></iframe>
+                <label for="asset-file" class="file-input-trigger">
-            <canvas id="admin-canvas"></canvas>
+                    <span class="file-input-icon"><i class="fa-solid fa-cloud-arrow-up"></i></span>
-        </section>
+                    <span class="file-input-copy">
-        <section class="controls-full panel">
+                        <strong>Upload asset</strong>
-            <div class="asset-management">
+                        <small id="asset-file-name">No file chosen</small>
-                <div class="asset-column">
+                    </span>
-                    <div class="upload-row">
+                </label>
-                        <input id="asset-file" class="file-input-field" type="file" accept="image/*,video/*,audio/*" onchange="handleFileSelection(this)" />
+            </div>
-                        <label for="asset-file" class="file-input-trigger">
+            <div class="rail-body">
-                            <span class="file-input-icon"><i class="fa-solid fa-cloud-arrow-up"></i></span>
+                <div class="rail-scroll">
-                            <span class="file-input-copy">
-                                <strong>Select an image, GIF, video, or audio</strong>
-                                <small id="asset-file-name">No file chosen</small>
-                            </span>
-                        </label>
-                    </div>
                     <ul id="asset-list" class="asset-list"></ul>
                 </div>
-                <div class="asset-column inspector">
+            </div>
-                    <div id="asset-inspector" class="asset-inspector panel-section hidden">
+
-                        <div class="selected-asset-banner">
+            <div id="asset-inspector" class="rail-inspector hidden">
-                            <div class="selected-asset-main">
+                <div class="drawer-header">
-                                <div class="title-row">
+                    <div>
-                                    <strong id="selected-asset-name">Choose an asset</strong>
+                        <p class="eyebrow subtle">Settings</p>
-                                </div>
+                        <h4>Selected asset</h4>
-                                <p class="meta-text" id="selected-asset-meta">Pick an asset in the list to adjust its placement and playback.</p>
+                    </div>
-                                <p class="meta-text subtle-text hidden" id="selected-asset-id"></p>
+                </div>
-                                <div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
+                <div class="asset-inspector panel-section">
+                    <div class="selected-asset-banner">
+                        <div class="selected-asset-main">
+                            <div class="title-row">
+                                <strong id="selected-asset-name">Choose an asset</strong>
                             </div>
+                            <p class="meta-text" id="selected-asset-meta">Pick an asset in the list to adjust its placement and playback.</p>
+                            <p class="meta-text subtle-text hidden" id="selected-asset-id"></p>
+                            <div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
                         </div>
-                        <div id="asset-controls-placeholder" class="asset-controls-placeholder">
+                    </div>
-                            <div id="asset-controls" class="hidden asset-settings">
+                    <div id="asset-controls-placeholder" class="asset-controls-placeholder">
-                                <div class="panel-section" id="layout-section">
+                        <div id="asset-controls" class="hidden asset-settings">
-                                    <div class="section-header">
+                            <div class="panel-section" id="layout-section">
-                                        <h5>Layout & order</h5>
+                                <div class="section-header">
-                                    </div>
+                                    <h5>Layout & order</h5>
-                                    <div class="control-grid condensed three-col">
-                                        <label>
-                                            Width
-                                            <input id="asset-width" class="number-input" type="number" min="10" step="5" />
-                                        </label>
-                                        <label>
-                                            Height
-                                            <input id="asset-height" class="number-input" type="number" min="10" step="5" />
-                                        </label>
-                                        <label>
-                                            Maintain AR
-                                            <label class="checkbox-inline toggle">
-                                                <input id="maintain-aspect" type="checkbox" checked />
-                                                <span class="toggle-track" aria-hidden="true">
-                                                    <span class="toggle-thumb"></span>
-                                                </span>
-                                            </label>
-                                        </label>
-                                    </div>
-                                    <div class="control-grid condensed">
-                                        <label>
-                                            Layer
-                                            <div class="badge-row stacked">
-                                                <span class="badge">Layer <strong id="asset-z-level">1</strong></span>
-                                            </div>
-                                        </label>
-                                    </div>
-                                    <div class="control-actions filled compact">
-                                        <button type="button" onclick="sendToBack()" class="secondary" title="Send to back"><i class="fa-solid fa-angles-down"></i></button>
-                                        <button type="button" onclick="bringBackward()" class="secondary" title="Move backward"><i class="fa-solid fa-arrow-down"></i></button>
-                                        <button type="button" onclick="bringForward()" class="secondary" title="Move forward"><i class="fa-solid fa-arrow-up"></i></button>
-                                        <button type="button" onclick="bringToFront()" class="secondary" title="Bring to front"><i class="fa-solid fa-angles-up"></i></button>
-                                        <button type="button" onclick="recenterSelectedAsset()" class="secondary" title="Center on canvas"><i class="fa-solid fa-bullseye"></i></button>
-                                        <button type="button" onclick="nudgeRotation(-5)" class="secondary" title="Rotate left"><i class="fa-solid fa-rotate-left"></i></button>
-                                        <button type="button" onclick="nudgeRotation(5)" class="secondary" title="Rotate right"><i class="fa-solid fa-rotate-right"></i></button>
-                                    </div>
                                 </div>
-
+                                <div class="control-grid condensed three-col">
-                                <div class="panel-section" id="playback-section">
+                                    <label>
-                                    <div class="section-header">
+                                        Width
-                                        <h5>Playback</h5>
+                                        <input id="asset-width" class="number-input" type="number" min="10" step="5" />
-                                    </div>
+                                    </label>
-                                    <div class="stacked-field">
+                                    <label>
-                                        <div class="label-row">
+                                        Height
-                                            <span>Playback speed</span>
+                                        <input id="asset-height" class="number-input" type="number" min="10" step="5" />
-                                            <span class="value-hint" id="asset-speed-label">100%</span>
+                                    </label>
-                                        </div>
+                                    <label>
-                                        <input id="asset-speed" class="range-input" type="range" min="0" max="1000" step="10" value="100" />
+                                        Maintain AR
-                                        <div class="range-meta"><span>0%</span><span>1000%</span></div>
+                                        <label class="checkbox-inline toggle">
-                                    </div>
+                                            <input id="maintain-aspect" type="checkbox" checked />
-                                </div>
-
-                                <div class="panel-section" id="volume-section">
-                                    <div class="section-header">
-                                        <h5>Volume</h5>
-                                    </div>
-                                    <div class="stacked-field">
-                                        <div class="label-row">
-                                            <span>Playback volume</span>
-                                            <span class="value-hint" id="asset-volume-label">100%</span>
-                                        </div>
-                                        <input id="asset-volume" class="range-input" type="range" min="0" max="200" step="1" value="100" />
-                                        <div class="range-meta"><span>0%</span><span>200%</span></div>
-                                    </div>
-                                </div>
-
-                                <div class="panel-section hidden" id="audio-section">
-                                    <div class="section-header">
-                                        <h5>Audio</h5>
-                                    </div>
-                                    <div class="control-grid condensed two-col">
-        
-                                        <label class="checkbox-inline toggle inline-toggle">
-                                            <input id="asset-audio-loop" type="checkbox" />
                                             <span class="toggle-track" aria-hidden="true">
                                                 <span class="toggle-thumb"></span>
                                             </span>
-                                            <span class="toggle-label">Loop</span>
                                         </label>
-                                        <label>
+                                    </label>
-                                            Delay (ms)
+                                </div>
-                                            <input id="asset-audio-delay" class="number-input" type="number" min="0" step="100" />
+                                <div class="control-grid condensed">
-                                        </label>
+                                    <label>
-                                    </div>
+                                        Layer
-                                    <div class="stacked-field">
+                                        <div class="badge-row stacked">
-                                        <div class="label-row">
+                                            <span class="badge">Layer <strong id="asset-z-level">1</strong></span>
-                                            <span>Playback speed</span>
-                                            <span class="value-hint" id="asset-audio-speed-label">1.0x</span>
                                         </div>
-                                        <input id="asset-audio-speed" class="range-input" type="range" min="25" max="400" step="5" value="100" />
+                                    </label>
-                                        <div class="range-meta"><span>0.25x</span><span>4x</span></div>
+                                </div>
+                                <div class="control-actions filled compact">
+                                    <button type="button" onclick="sendToBack()" class="secondary" title="Send to back"><i class="fa-solid fa-angles-down"></i></button>
+                                    <button type="button" onclick="bringBackward()" class="secondary" title="Move backward"><i class="fa-solid fa-arrow-down"></i></button>
+                                    <button type="button" onclick="bringForward()" class="secondary" title="Move forward"><i class="fa-solid fa-arrow-up"></i></button>
+                                    <button type="button" onclick="bringToFront()" class="secondary" title="Bring to front"><i class="fa-solid fa-angles-up"></i></button>
+                                    <button type="button" onclick="recenterSelectedAsset()" class="secondary" title="Center on canvas"><i class="fa-solid fa-bullseye"></i></button>
+                                    <button type="button" onclick="nudgeRotation(-5)" class="secondary" title="Rotate left"><i class="fa-solid fa-rotate-left"></i></button>
+                                    <button type="button" onclick="nudgeRotation(5)" class="secondary" title="Rotate right"><i class="fa-solid fa-rotate-right"></i></button>
+                                </div>
+                            </div>
+
+                            <div class="panel-section" id="playback-section">
+                                <div class="section-header">
+                                    <h5>Playback</h5>
+                                </div>
+                                <div class="stacked-field">
+                                    <div class="label-row">
+                                        <span>Playback speed</span>
+                                        <span class="value-hint" id="asset-speed-label">100%</span>
                                     </div>
-                                    <div class="control-grid condensed two-col">
+                                    <input id="asset-speed" class="range-input" type="range" min="0" max="1000" step="10" value="100" />
-                                        <label>
+                                    <div class="range-meta"><span>0%</span><span>1000%</span></div>
-                                            Pitch (%)
+                                </div>
-                                            <input id="asset-audio-pitch" class="range-input" type="range" min="50" max="200" step="5" value="100" />
+                            </div>
-                                        </label>
+
-                                        <div></div>
+                            <div class="panel-section" id="volume-section">
+                                <div class="section-header">
+                                    <h5>Volume</h5>
+                                </div>
+                                <div class="stacked-field">
+                                    <div class="label-row">
+                                        <span>Playback volume</span>
+                                        <span class="value-hint" id="asset-volume-label">100%</span>
                                     </div>
+                                    <input id="asset-volume" class="range-input" type="range" min="0" max="200" step="1" value="100" />
+                                    <div class="range-meta"><span>0%</span><span>200%</span></div>
+                                </div>
+                            </div>
+
+                            <div class="panel-section hidden" id="audio-section">
+                                <div class="section-header">
+                                    <h5>Audio</h5>
+                                </div>
+                                <div class="control-grid condensed two-col">
+
+                                    <label class="checkbox-inline toggle inline-toggle">
+                                        <input id="asset-audio-loop" type="checkbox" />
+                                        <span class="toggle-track" aria-hidden="true">
+                                            <span class="toggle-thumb"></span>
+                                        </span>
+                                        <span class="toggle-label">Loop</span>
+                                    </label>
+                                    <label>
+                                        Delay (ms)
+                                        <input id="asset-audio-delay" class="number-input" type="number" min="0" step="100"/>
+                                    </label>
+                                </div>
+                                <div class="stacked-field">
+                                    <div class="label-row">
+                                        <span>Playback speed</span>
+                                        <span class="value-hint" id="asset-audio-speed-label">1.0x</span>
+                                    </div>
+                                    <input id="asset-audio-speed" class="range-input" type="range" min="25" max="400" step="5" value="100" />
+                                    <div class="range-meta"><span>0.25x</span><span>4x</span></div>
+                                </div>
+                                <div class="control-grid condensed two-col">
+                                    <label>
+                                        Pitch (%)
+                                        <input id="asset-audio-pitch" class="range-input" type="range" min="50" max="200" step="5" value="100" />
+                                    </label>
+                                    <div></div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+        </aside>
+
+        <section class="canvas-stack">
+            <div class="canvas-topbar">
+                <div>
+                    <p class="eyebrow subtle">Canvas</p>
+                    <h3 class="panel-title">Live composition</h3>
+                </div>
+                <div class="canvas-meta">
+                    <span class="badge soft" id="canvas-resolution">1920 x 1080</span>
+                    <span class="badge outline" id="canvas-scale">100%</span>
+                </div>
+            </div>
+            <div class="canvas-surface">
+                <div class="overlay canvas-boundary" id="admin-overlay">
+                    <div class="canvas-guides"></div>
+                    <canvas id="admin-canvas"></canvas>
+                </div>
+                <div class="canvas-footnote">
+                    <p>Edges of the canvas are outlined to match your stream aspect ratio.</p>
+                </div>
+            </div>
         </section>
     </div>
 </div>