From 73f7e46a266414e89ef1aa34d48ffd6b294f723b Mon Sep 17 00:00:00 2001
From: Stefanie Jane <stef@hyperbliss.tech>
Date: Tue, 27 Oct 2026 09:01:22 -0700
Subject: [PATCH] fix(studio): smooth tab, panel, and drag interactions

Keep drag previews and drop feedback mounted so pointer movement and
changing targets do not reset their geometry or visual state. Clamp the
preview continuously at viewport edges and reserve space for its hint.

Coordinate tab selection, disclosures, and slide-overs with restrained
motion that respects reduced-motion preferences. Preserve canvas identity
and prevent focus from scrolling the stage during panel transitions.

Cover rapid selection, drag cancellation and spring loading, focus return,
and motion preferences in browser regressions. Isolate fixture rig data
and scope canvas assertions to outputs rather than retained device rows.

Co-Authored-By: Nova (Codex) <noreply@openai.com>
---
 crates/hypercolor-ui/input.css                |  48 +++++++
 .../src/pages/studio/composition_panel.rs     |  65 +++++++--
 .../src/pages/studio/device_card.rs           |  15 +-
 .../src/pages/studio/device_pane.rs           |  13 +-
 crates/hypercolor-ui/src/pages/studio/drag.rs | 121 +++++++---------
 .../src/pages/studio/drag_model.rs            |  16 +++
 crates/hypercolor-ui/src/pages/studio/mod.rs  |  20 ++-
 .../hypercolor-ui/src/pages/studio/stage.rs   |  18 ++-
 .../src/pages/studio/zone_strip.rs            |  52 ++++++-
 .../tests/studio_drag_model_tests.rs          |  54 ++++++-
 e2e/tests/studio-history-fixture.mjs          |   6 +
 e2e/tests/studio-motion.spec.mjs              | 134 ++++++++++++++++++
 e2e/tests/studio-performance.spec.mjs         |   2 +-
 13 files changed, 456 insertions(+), 108 deletions(-)
 create mode 100644 e2e/tests/studio-motion.spec.mjs

diff --git a/crates/hypercolor-ui/input.css b/crates/hypercolor-ui/input.css
index d9056976e..2cea587d6 100644
--- a/crates/hypercolor-ui/input.css
+++ b/crates/hypercolor-ui/input.css
@@ -2,6 +2,54 @@
 @import "./tokens/primitives.css";
 @import "./tokens/semantic.css";
 
+/* Studio keeps live surfaces mounted. Motion follows selection and
+   disclosure state without interpolating pointer-driven geometry. */
+.studio-tab-indicator {
+    transition: transform 200ms var(--ease-silk), width 200ms var(--ease-silk);
+}
+
+.studio-workspace[data-switch="1"] .studio-zone-content {
+    animation: studio-settle-a 160ms var(--ease-silk);
+}
+.studio-workspace[data-switch="2"] .studio-zone-content {
+    animation: studio-settle-b 160ms var(--ease-silk);
+}
+@keyframes studio-settle-a { from { opacity: 0.65; } to { opacity: 1; } }
+@keyframes studio-settle-b { from { opacity: 0.65; } to { opacity: 1; } }
+
+.studio-workspace[data-dragging="true"] .studio-zone-content {
+    animation: none;
+}
+
+.studio-disclosure {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition: grid-template-rows 200ms var(--ease-silk), opacity 160ms var(--ease-silk);
+}
+.studio-disclosure[data-open="true"] {
+    grid-template-rows: 1fr;
+    opacity: 1;
+}
+
+.studio-composition-panel,
+.studio-device-drawer {
+    transition: translate 240ms var(--ease-silk);
+}
+.studio-composition-scrim {
+    transition: opacity 200ms var(--ease-silk);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .studio-workspace[data-switch] .studio-zone-content { animation: none; }
+    .studio-tab-indicator,
+    .studio-disclosure,
+    .studio-composition-panel,
+    .studio-composition-scrim,
+    .studio-device-drawer,
+    .studio-workspace [aria-expanded] svg { transition: none; }
+}
+
 /* ── Toasts ──────────────────────────────────────────────────────────────
 
    Toasts float at the bottom right of the content area, clear of the
diff --git a/crates/hypercolor-ui/src/pages/studio/composition_panel.rs b/crates/hypercolor-ui/src/pages/studio/composition_panel.rs
index e92ea6f74..7d94a1423 100644
--- a/crates/hypercolor-ui/src/pages/studio/composition_panel.rs
+++ b/crates/hypercolor-ui/src/pages/studio/composition_panel.rs
@@ -9,6 +9,7 @@ use hypercolor_leptos_ext::events::target_is_text_entry;
 use leptos::ev;
 use leptos::prelude::*;
 use leptos_icons::Icon;
+use wasm_bindgen::JsCast;
 
 use crate::api;
 use crate::components::layer_panel::LayerPanel;
@@ -18,6 +19,9 @@ use super::StudioContext;
 use super::face_composition::{DefaultFaceCard, ScreenCompositionSection};
 use super::surface::selected_screen_device_id;
 
+pub(super) const COMPOSITION_PANEL_ID: &str = "studio-composition-panel";
+pub(super) const COMPOSITION_TRIGGER_ID: &str = "studio-composition-trigger";
+
 /// The right-edge composition slide-over. Stays mounted and animates via
 /// a transform; `inert` while closed keeps its controls out of the tab
 /// order. Positioned `absolute` inside the Stage pane so it overlays the
@@ -33,6 +37,43 @@ pub fn CompositionPanel(
 ) -> impl IntoView {
     let studio = expect_context::<StudioContext>();
     let open = studio.composition_open;
+    let panel_ref = NodeRef::<leptos::html::Aside>::new();
+    let close_ref = NodeRef::<leptos::html::Button>::new();
+
+    // Focus follows the disclosure without stealing it back from a control
+    // elsewhere in Studio when the panel closes.
+    Effect::new(move |previous: Option<bool>| {
+        let is_open = open.get();
+        if is_open && previous == Some(false) {
+            request_animation_frame(move || {
+                if open.try_get_untracked() == Some(true)
+                    && let Some(button) = close_ref.try_get_untracked().flatten()
+                {
+                    let options = web_sys::FocusOptions::new();
+                    options.set_prevent_scroll(true);
+                    let _ = button.focus_with_options(&options);
+                }
+            });
+        }
+        is_open
+    });
+    let close = move || {
+        let focused_in_panel = panel_ref.get_untracked().is_some_and(|panel| {
+            document()
+                .active_element()
+                .is_some_and(|active| panel.contains(Some(&active)))
+        });
+        if focused_in_panel
+            && let Some(trigger) = document()
+                .get_element_by_id(COMPOSITION_TRIGGER_ID)
+                .and_then(|element| element.dyn_into::<web_sys::HtmlElement>().ok())
+        {
+            let options = web_sys::FocusOptions::new();
+            options.set_prevent_scroll(true);
+            let _ = trigger.focus_with_options(&options);
+        }
+        open.set(false);
+    };
 
     // A Screen surface's backing display device — present only while the
     // selection is a display-role zone with a bound target. Drives the
@@ -49,32 +90,36 @@ pub fn CompositionPanel(
     let keydown = window_event_listener(ev::keydown, move |event| {
         if open.get_untracked() && event.key() == "Escape" && !target_is_text_entry(event.target())
         {
-            open.set(false);
+            close();
         }
     });
     on_cleanup(move || keydown.remove());
 
     view! {
         <div
-            class="absolute inset-0 z-30 bg-black/45 backdrop-blur-sm transition-opacity duration-200 ease-out"
+            class="studio-composition-scrim absolute inset-0 z-30 bg-black/45"
             class=("opacity-0", move || !open.get())
             class=("pointer-events-none", move || !open.get())
-            on:click=move |_| open.set(false)
+            on:click=move |_| close()
+            aria-hidden="true"
         />
         <aside
-            class="absolute inset-y-0 right-0 z-40 flex w-[420px] max-w-[88%] flex-col
-                   border-l border-edge-subtle bg-surface-base/95 backdrop-blur-md
-                   transition-transform duration-200 ease-out"
+            node_ref=panel_ref
+            id=COMPOSITION_PANEL_ID
+            aria-label="Composition"
+            aria-hidden=move || (!open.get()).to_string()
+            class="studio-composition-panel absolute inset-y-0 right-0 z-40 flex w-[420px] max-w-[88%] flex-col
+                   border-l border-edge-subtle bg-surface-base"
             class=("translate-x-full", move || !open.get())
-            style="box-shadow: -20px 0 52px -28px rgba(0, 0, 0, 0.75)"
-            inert=move || !open.get()
+            inert=move || (!open.get()).then_some("")
         >
             <div class="flex shrink-0 justify-end border-b border-edge-subtle/55 px-3 py-2">
                 <button
+                    node_ref=close_ref
                     type="button"
-                    class="flex h-6 w-6 items-center justify-center rounded-md text-fg-tertiary transition-all btn-press hover:bg-surface-hover/40 hover:text-fg-primary"
+                    class="flex h-6 w-6 items-center justify-center rounded-md text-fg-tertiary btn-press hover:bg-surface-hover/40 hover:text-fg-primary"
                     title="Close the composition panel"
-                    on:click=move |_| open.set(false)
+                    on:click=move |_| close()
                 >
                     <Icon icon=LuX width="14px" height="14px" />
                 </button>
diff --git a/crates/hypercolor-ui/src/pages/studio/device_card.rs b/crates/hypercolor-ui/src/pages/studio/device_card.rs
index 18c96d90f..f57947869 100644
--- a/crates/hypercolor-ui/src/pages/studio/device_card.rs
+++ b/crates/hypercolor-ui/src/pages/studio/device_card.rs
@@ -281,6 +281,7 @@ pub fn StudioDeviceCard(
         .collect();
     let show_components = total_components > 1;
     let channels_open = RwSignal::new(mode == CardMode::Placed);
+    let channels_id = format!("studio-channels-{zone_key}-{row_device_id}");
 
     // What the card moves as a whole, then each channel it lists, for the
     // drag and its "Move to" menu.
@@ -566,6 +567,7 @@ pub fn StudioDeviceCard(
                                         class="flex w-full items-center gap-1.5 border-t px-2.5 py-1 text-left text-[10px] text-fg-tertiary/80 transition-colors hover:text-fg-secondary"
                                         style=list_style.clone()
                                         aria-expanded=move || channels_open.get().to_string()
+                                        aria-controls=channels_id.clone()
                                         on:click=move |_| channels_open.update(|open| *open = !*open)
                                     >
                                         <Icon
@@ -573,6 +575,7 @@ pub fn StudioDeviceCard(
                                             width="10px"
                                             height="10px"
                                             {..}
+                                            class="transition-transform duration-200"
                                             class=("rotate-90", move || channels_open.get())
                                         />
                                         {format!("{channel_count} channels")}
@@ -580,10 +583,14 @@ pub fn StudioDeviceCard(
                                 }
                             })}
                         <div
-                            class="space-y-0.5 border-t px-1.5 py-1.5"
-                            class=("hidden", move || !channels_open.get())
-                            style=list_style.clone()
+                            id=channels_id.clone()
+                            class="studio-disclosure"
+                            data-open=move || channels_open.get().to_string()
+                            inert=move || (!channels_open.get()).then_some("")
+                            aria-hidden=move || (!channels_open.get()).to_string()
                         >
+                            <div class="min-h-0 overflow-hidden">
+                                <div class="space-y-0.5 border-t px-1.5 py-1.5" style=list_style.clone()>
                             {component_rows
                                 .into_iter()
                                 .map(|row| {
@@ -598,6 +605,8 @@ pub fn StudioDeviceCard(
                                     )
                                 })
                                 .collect_view()}
+                                </div>
+                            </div>
                         </div>
                     }
                 })}
diff --git a/crates/hypercolor-ui/src/pages/studio/device_pane.rs b/crates/hypercolor-ui/src/pages/studio/device_pane.rs
index 5e91ecd7b..4694aebd3 100644
--- a/crates/hypercolor-ui/src/pages/studio/device_pane.rs
+++ b/crates/hypercolor-ui/src/pages/studio/device_pane.rs
@@ -223,7 +223,7 @@ pub fn DevicePane() -> impl IntoView {
             on:touchmove=move |ev| drag.on_touch_move(&ev)
         >
             <PaneSearch search=search on_screens=on_screens />
-            <div class="scrollbar-none flex-1 overflow-y-auto px-3 pb-3" data-pane-scroll="">
+            <div class="studio-zone-content scrollbar-none flex-1 overflow-y-auto px-3 pb-3" data-pane-scroll="">
                 {move || {
                     if on_screens.get() {
                         return view! { <ScreenList query=query /> }.into_any();
@@ -514,7 +514,13 @@ fn OtherZoneRow(
                     {count}
                 </span>
             </button>
-            <Show when=move || expanded.get()>
+            <div
+                class="studio-disclosure"
+                data-open=move || expanded.get().to_string()
+                inert=move || (!expanded.get()).then_some("")
+                aria-hidden=move || (!expanded.get()).to_string()
+            >
+                <div class="min-h-0 overflow-hidden">
                 <div
                     id=list_id.clone()
                     class="space-y-0.5 border-t border-edge-subtle/40 bg-surface-sunken/50 px-1.5 py-1.5"
@@ -539,7 +545,8 @@ fn OtherZoneRow(
                             .into_any()
                     }}
                 </div>
-            </Show>
+                </div>
+            </div>
         </div>
     }
 }
diff --git a/crates/hypercolor-ui/src/pages/studio/drag.rs b/crates/hypercolor-ui/src/pages/studio/drag.rs
index 80a2ef286..358a1fed4 100644
--- a/crates/hypercolor-ui/src/pages/studio/drag.rs
+++ b/crates/hypercolor-ui/src/pages/studio/drag.rs
@@ -45,7 +45,7 @@ use crate::style_utils::device_accent_colors;
 use super::StudioContext;
 use super::drag_model::{
     CANCELLED_ANNOUNCEMENT, DragSource, DropTarget, MovePayload, SpringLoad, SpringPhase,
-    action_hint, opened_announcement, resolve_drop, springs,
+    action_hint, ghost_position, opened_announcement, resolve_drop, springs,
 };
 use super::move_menu::{MoveMenuAnchor, MoveMenuHost};
 use super::moves::{canvas_payload, perform, zone_name};
@@ -810,11 +810,9 @@ impl DragController {
     }
 }
 
-/// Where the ghost sits for a pointer at `(x, y)`: below and right of it,
-/// flipping to the other side near the window's right or bottom edge.
+/// The preview follows the pointer directly, then holds against the viewport
+/// edge. Its fixed footprint keeps target hints from shifting its position.
 fn ghost_transform((x, y): (f64, f64)) -> String {
-    const ROOM_X: f64 = 290.0;
-    const ROOM_Y: f64 = 72.0;
     let window = window();
     let extent = |value: Result<wasm_bindgen::JsValue, wasm_bindgen::JsValue>| {
         value
@@ -823,17 +821,8 @@ fn ghost_transform((x, y): (f64, f64)) -> String {
             .unwrap_or(f64::MAX)
     };
     let (width, height) = (extent(window.inner_width()), extent(window.inner_height()));
-    let (dx, shift_x) = if x + ROOM_X > width {
-        (x - 14.0, "-100%")
-    } else {
-        (x + 14.0, "0")
-    };
-    let (dy, shift_y) = if y + ROOM_Y > height {
-        (y - 12.0, "-100%")
-    } else {
-        (y + 12.0, "0")
-    };
-    format!("transform: translate({dx:.0}px, {dy:.0}px) translate({shift_x}, {shift_y})")
+    let (left, top) = ghost_position((x, y), (width, height), (240.0, 48.0));
+    format!("transform: translate3d({left:.2}px, {top:.2}px, 0)")
 }
 
 /// The device pane's scrolling list.
@@ -861,12 +850,12 @@ pub(crate) fn DragLayer() -> impl IntoView {
             })
             .map(|action| action_hint(&action, |id| zone_name(studio, id)))
     });
-    // The ghost mounts once per drag; only its hint line follows the
-    // target, so it does not replay its entrance on every target change.
-    let ghost = Memo::new(move |_| {
-        let payload = drag.payload.get()?;
-        // A box dragged on its own canvas is its own ghost.
-        (payload.source != DragSource::Canvas || hint.with(Option::is_some)).then_some(payload)
+    let ghost_visible = Memo::new(move |_| {
+        drag.payload.with(|payload| {
+            payload.as_ref().is_some_and(|payload| {
+                payload.source != DragSource::Canvas || hint.with(Option::is_some)
+            })
+        })
     });
     let canvas_look = Memo::new(move |_| {
         let rect = drag.canvas_rect.get()?;
@@ -881,44 +870,34 @@ pub(crate) fn DragLayer() -> impl IntoView {
         <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
             {move || drag.announcement.get()}
         </div>
-        {move || {
-            canvas_look
-                .get()
-                .map(|((left, top, width, height), look)| {
-                    let over = look == DropLook::Over;
-                    view! {
-                        <div
-                            class="pointer-events-none fixed z-[60] rounded-lg border-2 transition-colors duration-150"
-                            class=("border-accent", over)
-                            class=("bg-accent/10", over)
-                            class=("border-accent/50", !over)
-                            class=("border-dashed", !over)
-                            style=format!(
-                                "left: {left:.0}px; top: {top:.0}px; width: {width:.0}px; height: {height:.0}px",
-                            )
-                        >
-                            {move || {
-                                drag.canvas_point
-                                    .get()
-                                    .map(|point| {
-                                        view! {
-                                            <span
-                                                class="absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-accent bg-surface-base"
-                                                style=format!(
-                                                    "left: {:.2}%; top: {:.2}%",
-                                                    point.x * 100.0,
-                                                    point.y * 100.0,
-                                                )
-                                            />
-                                        }
-                                    })
-                            }}
-                        </div>
-                    }
+        <Show when=move || canvas_look.with(Option::is_some)>
+            <div
+                data-studio-drop-preview=""
+                class="pointer-events-none fixed z-[60] rounded-lg border-2 transition-colors duration-150 motion-reduce:transition-none"
+                class=("border-accent", move || canvas_look.with(|look| look.is_some_and(|(_, look)| look == DropLook::Over)))
+                class=("bg-accent/10", move || canvas_look.with(|look| look.is_some_and(|(_, look)| look == DropLook::Over)))
+                class=("border-accent/40", move || canvas_look.with(|look| look.is_some_and(|(_, look)| look != DropLook::Over)))
+                class=("border-dashed", move || canvas_look.with(|look| look.is_some_and(|(_, look)| look != DropLook::Over)))
+                style=move || canvas_look.with(|look| {
+                    look.map(|((left, top, width, height), _)| format!(
+                        "left: {left:.2}px; top: {top:.2}px; width: {width:.2}px; height: {height:.2}px",
+                    )).unwrap_or_default()
                 })
-        }}
+                aria-hidden="true"
+            >
+                <span
+                    data-studio-drop-point=""
+                    class="absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-accent bg-surface-base transition-opacity duration-150 motion-reduce:transition-none"
+                    class=("opacity-0", move || drag.canvas_point.with(Option::is_none))
+                    style=move || {
+                        let point = drag.canvas_point.get().unwrap_or(NormalizedPosition::new(0.5, 0.5));
+                        format!("left: {:.2}%; top: {:.2}%", point.x * 100.0, point.y * 100.0)
+                    }
+                />
+            </div>
+        </Show>
         {move || {
-            ghost
+            drag.payload
                 .get()
                 .map(|payload| {
                     let (primary, secondary) = device_accent_colors(&payload.device_id);
@@ -927,27 +906,25 @@ pub(crate) fn DragLayer() -> impl IntoView {
                     );
                     view! {
                         <div
-                            class="pointer-events-none fixed left-0 top-0 z-[80]"
+                            data-studio-drag-ghost=""
+                            class="pointer-events-none fixed left-0 top-0 z-[80] h-12 w-[240px] max-w-[calc(100vw-16px)] transition-opacity duration-150 motion-reduce:transition-none"
+                            class=("opacity-0", move || !ghost_visible.get())
                             style=move || ghost_transform(drag.pointer.get())
                             aria-hidden="true"
                         >
-                            <div class="flex max-w-[260px] items-center gap-2 rounded-lg border border-edge-subtle bg-surface-overlay/98 py-1.5 pl-2 pr-2.5 backdrop-blur-xl dropdown-glow animate-enter-scale">
+                            <div class="flex h-full items-center gap-2 rounded-lg border border-edge-subtle bg-surface-overlay py-1.5 pl-2 pr-2.5 dropdown-glow animate-enter-fade">
                                 <span class="h-7 w-1 shrink-0 rounded-full" style=strip />
-                                <div class="min-w-0">
+                                <div class="min-w-0 flex-1">
                                     <div class="truncate text-[12px] font-medium text-fg-primary">
                                         {payload.label.clone()}
                                     </div>
-                                    {move || {
-                                        hint.get()
-                                            .map(|hint| {
-                                                view! {
-                                                    <div class="flex items-center gap-1 text-[10px] text-fg-tertiary">
-                                                        <Icon icon=LuChevronRight width="10px" height="10px" />
-                                                        <span class="truncate">{hint}</span>
-                                                    </div>
-                                                }
-                                            })
-                                    }}
+                                    <div
+                                        class="flex h-4 items-center gap-1 text-[10px] text-fg-tertiary transition-opacity duration-150 motion-reduce:transition-none"
+                                        class=("opacity-0", move || hint.with(Option::is_none))
+                                    >
+                                        <Icon icon=LuChevronRight width="10px" height="10px" />
+                                        <span class="truncate">{move || hint.get().unwrap_or_default()}</span>
+                                    </div>
                                 </div>
                                 {payload.badge().map(|count| {
                                     view! {
diff --git a/crates/hypercolor-ui/src/pages/studio/drag_model.rs b/crates/hypercolor-ui/src/pages/studio/drag_model.rs
index 373a0e1d9..8b6f43f0f 100644
--- a/crates/hypercolor-ui/src/pages/studio/drag_model.rs
+++ b/crates/hypercolor-ui/src/pages/studio/drag_model.rs
@@ -9,6 +9,22 @@
 
 use hypercolor_types::spatial::NormalizedPosition;
 
+/// Place a drag preview near the pointer while keeping it inside the viewport.
+/// Clamping instead of flipping sides keeps its travel continuous at an edge.
+#[must_use]
+pub fn ghost_position(pointer: (f64, f64), viewport: (f64, f64), size: (f64, f64)) -> (f64, f64) {
+    const INSET: f64 = 8.0;
+    let axis = |pointer: f64, extent: f64, size: f64, offset: f64| {
+        let available = (extent - INSET * 2.0).max(0.0);
+        let end = (extent - size.min(available) - INSET).max(INSET);
+        (pointer + offset).clamp(INSET, end)
+    };
+    (
+        axis(pointer.0, viewport.0, size.0, 14.0),
+        axis(pointer.1, viewport.1, size.1, 12.0),
+    )
+}
+
 /// Where the moving outputs live before the move.
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub enum Origin {
diff --git a/crates/hypercolor-ui/src/pages/studio/mod.rs b/crates/hypercolor-ui/src/pages/studio/mod.rs
index 65411189c..075737dc9 100644
--- a/crates/hypercolor-ui/src/pages/studio/mod.rs
+++ b/crates/hypercolor-ui/src/pages/studio/mod.rs
@@ -548,6 +548,18 @@ fn StudioWorkspace() -> impl IntoView {
     }));
     on_cleanup(move || history.attach_announcer(None));
     let dragging = Memo::new(move |_| drag.payload.with(Option::is_some));
+    // Restart the short content settle only for a different tab. Scene
+    // refreshes and repeated clicks keep the live canvas undisturbed.
+    let content_switch = RwSignal::new(0_u8);
+    Effect::new(move |previous: Option<Option<String>>| {
+        let selected = selected_surface_id.get();
+        if dragging.get() {
+            content_switch.set(0);
+        } else if previous.is_some_and(|previous| previous != selected) {
+            content_switch.update(|phase| *phase = if *phase == 1 { 2 } else { 1 });
+        }
+        selected
+    });
 
     let on_screens = Memo::new(move |_| {
         let selected = selected_surface_id.get();
@@ -569,7 +581,9 @@ fn StudioWorkspace() -> impl IntoView {
     view! {
         <div
             node_ref=root_ref
-            class="flex h-full flex-col overflow-hidden"
+            class="studio-workspace flex h-full flex-col overflow-hidden"
+            data-switch=move || content_switch.get().to_string()
+            data-dragging=move || dragging.get().to_string()
             class=("cursor-grabbing", move || dragging.get())
             class=("select-none", move || dragging.get())
             on:pointermove=move |ev| drag.on_move(&ev)
@@ -621,7 +635,7 @@ fn StudioWorkspace() -> impl IntoView {
                     // deliberately covers the bar instead of stacking above
                     // it. Keep bracket class syntax out of comments; the
                     // Tailwind scanner reads them and emits dead rules.
-                    class="w-80 shrink-0 overflow-hidden lg:w-[var(--pane-w)] max-lg:fixed max-lg:inset-y-0 max-lg:left-0 max-lg:z-[45] max-lg:border-r max-lg:border-edge-subtle/70 max-lg:transition-transform max-lg:duration-200 max-md:pb-[env(safe-area-inset-bottom)]"
+                    class="studio-device-drawer w-80 shrink-0 overflow-hidden lg:w-[var(--pane-w)] max-lg:fixed max-lg:inset-y-0 max-lg:left-0 max-lg:z-[45] max-lg:border-r max-lg:border-edge-subtle/70 max-md:pb-[env(safe-area-inset-bottom)]"
                     class=("max-lg:-translate-x-full", move || !pane_drawer.get())
                     style:--pane-w=move || format!("{}px", pane_width.get())
                 >
@@ -640,7 +654,7 @@ fn StudioWorkspace() -> impl IntoView {
                         on_drag_end=Callback::new(|()| {})
                     />
                 </div>
-                <div class="relative min-w-0 flex-1">
+                <div class="relative min-w-0 flex-1 overflow-hidden">
                     <ZoneLayoutProvider
                         selected_zone_id=selected_surface_id
                         refresh_scene=refresh_scene
diff --git a/crates/hypercolor-ui/src/pages/studio/stage.rs b/crates/hypercolor-ui/src/pages/studio/stage.rs
index c9c24d53d..1d19ccdd9 100644
--- a/crates/hypercolor-ui/src/pages/studio/stage.rs
+++ b/crates/hypercolor-ui/src/pages/studio/stage.rs
@@ -27,6 +27,7 @@ use crate::display_utils::display_preview_shell_url;
 use crate::icons::*;
 use crate::ws::messages::zone_has_degraded_layer;
 
+use super::composition_panel::{COMPOSITION_PANEL_ID, COMPOSITION_TRIGGER_ID};
 use super::surface::{Surface, SurfaceKind, layer_label, now_playing, surfaces_from_zones};
 use super::{StudioContext, hidden_outputs_storage_key};
 
@@ -183,7 +184,7 @@ pub fn Stage() -> impl IntoView {
         Signal::derive(move || selected_display.get().map(|display| display.rotation));
 
     view! {
-        <div class="flex h-full flex-col bg-surface-sunken/20">
+        <div class="studio-zone-content flex h-full flex-col bg-surface-sunken/20">
             <div class="flex items-center justify-between gap-3 border-b border-edge-subtle/60 px-5 py-3">
                 <NowPlayingChip surface=selected_surface />
                 {move || {
@@ -420,23 +421,26 @@ fn NowPlayingChip(#[prop(into)] surface: Signal<Option<Surface>>) -> impl IntoVi
     view! {
         <button
             type="button"
+            id=COMPOSITION_TRIGGER_ID
+            aria-controls=COMPOSITION_PANEL_ID
+            aria-expanded=move || studio.composition_open.get().to_string()
             class="group flex items-center gap-2 rounded-lg border border-edge-subtle/60 bg-surface-overlay/40 px-3 py-1.5 transition-colors hover:border-accent-muted hover:bg-surface-overlay/70"
-            title="Open the composition panel"
+            title=move || if studio.composition_open.get() { "Close the composition panel" } else { "Open the composition panel" }
             on:click=move |_| studio.composition_open.update(|open| *open = !*open)
         >
             <Icon
                 icon=LuLayers
                 width="13px"
                 height="13px"
-                style="color: rgba(225, 53, 255, 0.75)"
+                {..}
+                class="text-accent/75"
             />
             <span class="max-w-[200px] truncate text-[12px] font-medium text-fg-secondary group-hover:text-fg-primary">
                 {label}
             </span>
             <Show when=is_default_face>
                 <span
-                    class="rounded-full border px-1.5 py-px text-[9px] font-semibold uppercase tracking-[0.14em]"
-                    style="border-color: rgba(225, 53, 255, 0.35); color: rgba(225, 53, 255, 0.85)"
+                    class="rounded-full border border-accent/35 px-1.5 py-px text-[9px] font-semibold uppercase tracking-[0.14em] text-accent/85"
                     title="The display's default face, shown in every scene without its own face layer"
                 >
                     "Default"
@@ -446,7 +450,9 @@ fn NowPlayingChip(#[prop(into)] surface: Signal<Option<Surface>>) -> impl IntoVi
                 icon=LuChevronRight
                 width="12px"
                 height="12px"
-                style="color: rgba(139, 133, 160, 0.55)"
+                {..}
+                class="text-fg-tertiary/55 transition-transform duration-200"
+                class=("rotate-180", move || studio.composition_open.get())
             />
         </button>
     }
diff --git a/crates/hypercolor-ui/src/pages/studio/zone_strip.rs b/crates/hypercolor-ui/src/pages/studio/zone_strip.rs
index a21b1c999..149881ebf 100644
--- a/crates/hypercolor-ui/src/pages/studio/zone_strip.rs
+++ b/crates/hypercolor-ui/src/pages/studio/zone_strip.rs
@@ -392,13 +392,57 @@ pub fn ZoneStrip() -> impl IntoView {
 
     let has_screens = Memo::new(move |_| !screen_ids.with(Vec::is_empty));
     let screen_count = Memo::new(move |_| screen_ids.with(Vec::len));
+    let indicator = RwSignal::new(None::<(f64, f64)>);
+    Effect::new(move |_| {
+        studio.selected_surface_id.track();
+        on_screens.track();
+        visible_ids.track();
+        lights.track();
+        strip_width.track();
+        strip_ref.track();
+        // Measure after keyed tabs and overflow have committed their DOM.
+        request_animation_frame(move || {
+            let Some(strip) = strip_ref.try_get_untracked().flatten() else {
+                return;
+            };
+            let Some(selected) = studio.selected_surface_id.try_get_untracked() else {
+                return;
+            };
+            let dom_id = active_tab_dom_id(
+                selected.as_deref(),
+                on_screens.try_get_untracked().unwrap_or(false),
+            );
+            let geometry = dom_id
+                .and_then(|id| document().get_element_by_id(&id))
+                .and_then(|tab| tab.parent_element())
+                .map(|tab| {
+                    let rect = tab.get_bounding_client_rect();
+                    let origin = strip.get_bounding_client_rect();
+                    (
+                        rect.left() - origin.left() + 8.0,
+                        (rect.width() - 16.0).max(0.0),
+                    )
+                });
+            indicator.try_set(geometry);
+        });
+    });
 
     view! {
         <div
             node_ref=strip_ref
-            class="flex h-full min-w-0 flex-1 items-end gap-1 self-stretch"
+            class="relative flex h-full min-w-0 flex-1 items-end gap-1 self-stretch"
             on:keydown=on_keydown
         >
+            <Show when=move || indicator.with(Option::is_some)>
+                <span
+                    class="studio-tab-indicator pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 rounded-full bg-accent"
+                    aria-hidden="true"
+                    style=move || {
+                        let (left, width) = indicator.get().unwrap_or_default();
+                        format!("transform: translateX({left}px); width: {width}px")
+                    }
+                />
+            </Show>
             <div
                 node_ref=handles.tabs_ref
                 role="tablist"
@@ -450,9 +494,6 @@ pub fn ZoneStrip() -> impl IntoView {
                     class=("hover:bg-surface-hover/30", move || !on_screens.get())
                     class=("hover:text-fg-secondary", move || !on_screens.get())
                 >
-                    <Show when=move || on_screens.get()>
-                        <span class="pointer-events-none absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-accent" />
-                    </Show>
                     <button
                         type="button"
                         role="tab"
@@ -728,9 +769,6 @@ fn ZoneTab(zone_id: String, handles: StripHandles) -> impl IntoView {
             class=("ring-accent", move || drop_look.get() == DropLook::Over)
             class=("bg-accent/10", move || drop_look.get() == DropLook::Over)
         >
-            <Show when=move || is_active.get()>
-                <span class="pointer-events-none absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-accent" />
-            </Show>
             {tab_view}
             // Holding a drag here opens the tab when the ring fills.
             <Show when=move || springing.get()>
diff --git a/crates/hypercolor-ui/tests/studio_drag_model_tests.rs b/crates/hypercolor-ui/tests/studio_drag_model_tests.rs
index 393856a87..10dd4d834 100644
--- a/crates/hypercolor-ui/tests/studio_drag_model_tests.rs
+++ b/crates/hypercolor-ui/tests/studio_drag_model_tests.rs
@@ -5,14 +5,62 @@ use hypercolor_types::spatial::NormalizedPosition;
 
 use hypercolor_ui::pages::studio::drag_model::{
     CANCELLED_ANNOUNCEMENT, DragSource, DropAction, DropTarget, MovePayload, Origin, SpringLoad,
-    SpringPhase, action_hint, channel_label, moved_announcement, new_zone_announcement,
-    opened_announcement, origin_name, placed_announcement, resolve_drop, springs,
-    zone_name_for_device,
+    SpringPhase, action_hint, channel_label, ghost_position, moved_announcement,
+    new_zone_announcement, opened_announcement, origin_name, placed_announcement, resolve_drop,
+    springs, zone_name_for_device,
 };
 
 const MAIN: &str = "main";
 const KEYS: &str = "keyboard";
 
+#[test]
+fn ghost_tracks_pointer_until_it_reaches_the_viewport_inset() {
+    let viewport = (1024.0, 768.0);
+    let size = (240.0, 48.0);
+    assert_eq!(
+        ghost_position((100.0, 200.0), viewport, size),
+        (114.0, 212.0)
+    );
+    assert_eq!(
+        ghost_position((1024.0, 768.0), viewport, size),
+        (776.0, 712.0)
+    );
+    assert_eq!(ghost_position((-30.0, -30.0), viewport, size), (8.0, 8.0));
+}
+
+#[test]
+fn ghost_never_jumps_when_crossing_an_edge_threshold_in_either_direction() {
+    let viewport = (1024.0, 768.0);
+    let size = (240.0, 48.0);
+    let mut previous = ghost_position((0.0, 0.0), viewport, size);
+    for step in 1..1200 {
+        let point = f64::from(step);
+        let current = ghost_position((point, point), viewport, size);
+        assert!((0.0..=1.0).contains(&(current.0 - previous.0)));
+        assert!((0.0..=1.0).contains(&(current.1 - previous.1)));
+        previous = current;
+    }
+    for step in (0..1200).rev() {
+        let point = f64::from(step);
+        let current = ghost_position((point, point), viewport, size);
+        assert!((-1.0..=0.0).contains(&(current.0 - previous.0)));
+        assert!((-1.0..=0.0).contains(&(current.1 - previous.1)));
+        previous = current;
+    }
+}
+
+#[test]
+fn ghost_accounts_for_a_preview_narrowed_to_fit_a_small_viewport() {
+    assert_eq!(
+        ghost_position((180.0, 100.0), (200.0, 160.0), (240.0, 48.0)),
+        (8.0, 104.0)
+    );
+    assert_eq!(
+        ghost_position((0.0, 0.0), (0.0, 0.0), (240.0, 48.0)),
+        (8.0, 8.0)
+    );
+}
+
 fn point(x: f32, y: f32) -> NormalizedPosition {
     NormalizedPosition::new(x, y)
 }
diff --git a/e2e/tests/studio-history-fixture.mjs b/e2e/tests/studio-history-fixture.mjs
index 65f5d434f..0d9d2fda0 100644
--- a/e2e/tests/studio-history-fixture.mjs
+++ b/e2e/tests/studio-history-fixture.mjs
@@ -66,6 +66,12 @@ export async function openHistory(page, { placedStand = false, offline = false,
       if (path === "/api/v1/layouts") {
         return route.fulfill({ json: envelope({ items: [], total: 0 }), headers: daemonHeaders(scene) });
       }
+      if (path === "/api/v1/layouts/active") {
+        return route.fulfill({ json: envelope({
+          id: "fixture-rig", name: "Fixture rig", description: null,
+          canvas_width: 640, canvas_height: 480, zones: [], version: 1,
+        }), headers: daemonHeaders(scene) });
+      }
       return route.continue();
     }
     const body = request.postDataJSON();
diff --git a/e2e/tests/studio-motion.spec.mjs b/e2e/tests/studio-motion.spec.mjs
new file mode 100644
index 000000000..cb4b3e960
--- /dev/null
+++ b/e2e/tests/studio-motion.spec.mjs
@@ -0,0 +1,134 @@
+import { test, expect } from "@playwright/test";
+import { openHistory, FIRST, SECOND } from "./studio-history-fixture.mjs";
+
+const tab = (page, id) => page.locator(`#zone-tab-${id}`);
+
+test("Studio keeps its canvas and tab geometry through rapid selection", async ({ page }) => {
+  await openHistory(page);
+  await expect(page.locator(".studio-tab-indicator")).toBeVisible();
+  await page.evaluate(() => {
+    window.motionCanvas = document.querySelector("[data-studio-canvas]");
+    window.motionIndicator = document.querySelector(".studio-tab-indicator");
+    window.motionTabs = [...document.querySelectorAll("[data-zone-tab]")].map((el) => el.getBoundingClientRect().toJSON());
+  });
+  for (const id of [SECOND, FIRST, SECOND]) await tab(page, id).click();
+  await expect(tab(page, SECOND)).toHaveAttribute("aria-selected", "true");
+  await expect.poll(() => page.evaluate(() => {
+    const active = document.querySelector('[role="tab"][aria-selected="true"]').parentElement.getBoundingClientRect();
+    const line = document.querySelector(".studio-tab-indicator").getBoundingClientRect();
+    return Math.abs(line.left - active.left - 8) < 1 && Math.abs(line.width - active.width + 16) < 1;
+  })).toBe(true);
+  expect(await page.evaluate(() => ({
+    canvas: window.motionCanvas === document.querySelector("[data-studio-canvas]"),
+    indicator: window.motionIndicator === document.querySelector(".studio-tab-indicator"),
+    tabs: [...document.querySelectorAll("[data-zone-tab]")].every((el, i) => {
+      const rect = el.getBoundingClientRect();
+      return rect.x === window.motionTabs[i].x && rect.width === window.motionTabs[i].width;
+    }),
+  }))).toEqual({ canvas: true, indicator: true, tabs: true });
+});
+
+test("Studio disclosures keep their contents and return composition focus", async ({ page }) => {
+  await openHistory(page, { placedStand: true });
+  const disclosure = page.locator(`#pane-zone-${SECOND} .studio-disclosure`);
+  const toggle = page.locator(`#pane-zone-toggle-${SECOND}`);
+  await expect(disclosure).toHaveAttribute("inert", "");
+  await toggle.click();
+  await expect(disclosure).toHaveAttribute("data-open", "true");
+  await disclosure.evaluate((el) => { window.disclosureBody = el.firstElementChild; });
+  await toggle.click();
+  await expect(disclosure).toHaveAttribute("aria-hidden", "true");
+  await toggle.click();
+  expect(await disclosure.evaluate((el) => el.firstElementChild === window.disclosureBody)).toBe(true);
+
+  const trigger = page.locator("#studio-composition-trigger");
+  const panel = page.locator("#studio-composition-panel");
+  await trigger.click();
+  expect(await panel.evaluate((el) => getComputedStyle(el).transitionProperty)).toBe("translate");
+  await expect(trigger).toHaveAttribute("aria-expanded", "true");
+  await expect(panel.getByTitle("Close the composition panel")).toBeFocused();
+  await page.keyboard.press("Escape");
+  await expect(panel).toHaveAttribute("inert", "");
+  await expect(trigger).toBeFocused();
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+
+  const frames = await trigger.evaluate(async (button) => {
+    const panel = document.querySelector("#studio-composition-panel");
+    await Promise.all(panel.getAnimations().map((animation) => animation.finished));
+    button.click();
+    const frames = [];
+    for (let frame = 0; frame < 20; frame++) {
+      await new Promise(requestAnimationFrame);
+      frames.push({ x: panel.getBoundingClientRect().x, scroll: panel.parentElement.scrollLeft });
+    }
+    return frames;
+  });
+  expect(frames.every((frame) => frame.scroll === 0)).toBe(true);
+  expect(frames.some((frame) => frame.x > frames.at(-1).x + 1 && frame.x < 1600)).toBe(true);
+});
+
+test("Studio honors reduced motion in both themes", async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await openHistory(page);
+  for (const theme of ["dark", "light"]) {
+    await page.evaluate((theme) => document.documentElement.dataset.theme = theme, theme);
+    await tab(page, SECOND).click();
+    expect(await page.evaluate(() => ({
+      indicator: getComputedStyle(document.querySelector(".studio-tab-indicator")).transitionDuration,
+      panel: getComputedStyle(document.querySelector(".studio-composition-panel")).transitionDuration,
+      disclosure: getComputedStyle(document.querySelector(".studio-disclosure")).transitionDuration,
+      content: getComputedStyle(document.querySelector(".studio-zone-content")).animationName,
+    }))).toEqual({ indicator: "0s", panel: "0s", disclosure: "0s", content: "none" });
+    await tab(page, FIRST).click();
+  }
+});
+
+test("Studio drag feedback stays mounted and clamps continuously at the edge", async ({ page }) => {
+  const fixture = await openHistory(page);
+  await tab(page, SECOND).click();
+  await tab(page, FIRST).click();
+  await page.evaluate(async () => {
+    await Promise.all([...document.querySelectorAll(".studio-zone-content")].flatMap((el) => el.getAnimations().map((animation) => animation.finished)));
+    window.dragSettles = [];
+    document.addEventListener("animationstart", (event) => {
+      if (event.animationName.startsWith("studio-settle")) window.dragSettles.push(event.animationName);
+    });
+  });
+  const source = page.getByRole("button", { name: "Laptop stand 12 LEDs · Fixture", exact: true });
+  const sourceBox = await source.boundingBox();
+  await page.mouse.move(sourceBox.x + 30, sourceBox.y + 15);
+  await page.mouse.down();
+  await page.mouse.move(sourceBox.x + 50, sourceBox.y + 15);
+  const ghost = page.locator("[data-studio-drag-ghost]");
+  await expect(ghost).toBeVisible();
+  await page.evaluate(() => {
+    window.dragGhost = document.querySelector("[data-studio-drag-ghost]");
+    window.dragPreview = document.querySelector("[data-studio-drop-preview]");
+    window.dragPoint = document.querySelector("[data-studio-drop-point]");
+  });
+  const canvas = await page.locator("[data-studio-canvas]").boundingBox();
+  await page.mouse.move(canvas.x + canvas.width / 2, canvas.y + canvas.height / 2);
+  await page.mouse.move(canvas.x + canvas.width / 2 + 30, canvas.y + canvas.height / 2 + 30);
+  expect(await page.evaluate(() => ({
+    ghost: window.dragGhost === document.querySelector("[data-studio-drag-ghost]"),
+    preview: window.dragPreview === document.querySelector("[data-studio-drop-preview]"),
+    point: window.dragPoint === document.querySelector("[data-studio-drop-point]"),
+  }))).toEqual({ ghost: true, preview: true, point: true });
+  const positions = [];
+  for (const x of [1290, 1310, 1330, 1350, 1370, 1390, 1450, 1590]) {
+    await page.mouse.move(x, 650);
+    positions.push((await ghost.boundingBox()).x);
+  }
+  expect(positions.every((x, i) => i === 0 || x >= positions[i - 1])).toBe(true);
+  expect(positions.at(-1) + (await ghost.boundingBox()).width).toBeLessThanOrEqual(1592);
+  const destination = await tab(page, SECOND).boundingBox();
+  await page.mouse.move(destination.x + destination.width / 2, destination.y + destination.height / 2);
+  await expect(tab(page, SECOND)).toHaveAttribute("aria-selected", "true");
+  await expect(ghost).toBeVisible();
+  expect(await page.evaluate(() => window.dragGhost === document.querySelector("[data-studio-drag-ghost]"))).toBe(true);
+  await page.keyboard.press("Escape");
+  await page.mouse.up();
+  await expect(ghost).toHaveCount(0);
+  expect(await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve(window.dragSettles)))))).toEqual([]);
+  expect(fixture.writes).toEqual([]);
+});
diff --git a/e2e/tests/studio-performance.spec.mjs b/e2e/tests/studio-performance.spec.mjs
index fec886bed..11b7d9413 100644
--- a/e2e/tests/studio-performance.spec.mjs
+++ b/e2e/tests/studio-performance.spec.mjs
@@ -5,7 +5,7 @@ import { getStack, parseFence } from "./helpers.mjs";
 const OUTPUT_COUNT = 80;
 const FIRST_ZONE = "11111111-1111-4111-8111-111111111111";
 const SECOND_ZONE = "22222222-2222-4222-8222-222222222222";
-const outputSelector = "[data-zone-id]";
+const outputSelector = "[data-studio-canvas] [data-zone-id]";
 const handleSelector = ":scope > div.w-3.h-3";
 
 function studioScene() {