From e5612b9712b8ae255e7521659a4878d0380e9486 Mon Sep 17 00:00:00 2001
From: Stefanie Jane <stef@hyperbliss.tech>
Date: Wed, 9 Sep 2026 20:57:12 -0700
Subject: [PATCH] fix(ui): preserve Studio layer controls across scene updates

Keep effect widgets mounted while authoritative scene values refresh so
edits retain scroll position and focus. Reconcile snapshots beneath
pending writes, restore rejected values, and cache schemas across layer
replacements without retaining retired mutation targets.

Coalesce scene invalidations and avoid unrelated face and primary-effect
reloads. Cover control edits, remote updates, replacement revisions,
failed writes, and advanced-panel scrolling with browser regressions.

Co-Authored-By: Nova (Codex) <noreply@openai.com>
---
 crates/hypercolor-ui/src/app.rs               |  14 +-
 .../src/components/layer_panel/controls.rs    | 148 ++++++----
 .../src/components/layer_panel/mod.rs         | 189 +++++++------
 .../src/components/layer_panel/row.rs         | 160 +++++------
 crates/hypercolor-ui/src/control_session.rs   |  10 +
 .../hypercolor-ui/src/optimistic_controls.rs  |  74 ++++-
 crates/hypercolor-ui/src/pages/studio/mod.rs  |  30 +-
 crates/hypercolor-ui/src/ws/messages.rs       |  59 ++++
 crates/hypercolor-ui/src/zones.rs             |  25 +-
 .../hypercolor-ui/tests/layer_panel_tests.rs  |  32 +++
 .../hypercolor-ui/tests/ws_messages_tests.rs  | 142 +++++++++-
 e2e/tests/studio-controls.spec.mjs            | 262 ++++++++++++++++++
 12 files changed, 869 insertions(+), 276 deletions(-)
 create mode 100644 e2e/tests/studio-controls.spec.mjs

diff --git a/crates/hypercolor-ui/src/app.rs b/crates/hypercolor-ui/src/app.rs
index 982a984a6..e9acea577 100644
--- a/crates/hypercolor-ui/src/app.rs
+++ b/crates/hypercolor-ui/src/app.rs
@@ -38,7 +38,7 @@ use crate::preferences::PreferencesStore;
 use crate::preview_telemetry::{PreviewPresenterTelemetry, PreviewTelemetryContext};
 use crate::thumbnails::{self, ThumbnailStore};
 use crate::toasts;
-use crate::ws::messages::scene_event_affects_active_effect;
+use crate::ws::messages::scene_event_requires_effect_refresh;
 use crate::ws::{
     AudioLevel, BackpressureNotice, CanvasFrame, ControlSurfaceEventHint, DeviceEventHint,
     EffectErrorHint, ExtensionEventHint, InputInjectEdge, InputSourceStatusEventHint,
@@ -934,10 +934,14 @@ pub fn app_view(ext: UiExtensions) -> impl IntoView {
                     .set_active_scene_mutation_mode
                     .set(Some(scene_mutation_mode));
             }
-            if current_scene_event
-                .as_ref()
-                .is_none_or(scene_event_affects_active_effect)
-            {
+            let target = effects_ctx.active_effect_target.get_untracked();
+            if current_scene_event.as_ref().is_none_or(|current| {
+                scene_event_requires_effect_refresh(
+                    previous_scene_event.as_ref().and_then(Option::as_ref),
+                    current,
+                    target.as_ref().map(|target| target.zone_id.as_str()),
+                )
+            }) {
                 effects_ctx.refresh_active_effect();
             }
 
diff --git a/crates/hypercolor-ui/src/components/layer_panel/controls.rs b/crates/hypercolor-ui/src/components/layer_panel/controls.rs
index 2948a03d0..1ba61d1c0 100644
--- a/crates/hypercolor-ui/src/components/layer_panel/controls.rs
+++ b/crates/hypercolor-ui/src/components/layer_panel/controls.rs
@@ -37,35 +37,57 @@ const LAYER_CONTROLS_DEBOUNCE_MS: f64 = 120.0;
 #[component]
 pub fn EffectControlsSection(
     zone_id: String,
-    layer: SceneLayer,
+    layer: Signal<SceneLayer>,
+    effect_cache: super::LayerEffectCache,
     on_layers_mutated: Callback<()>,
 ) -> impl IntoView {
     let LayerSource::Effect {
         effect_id,
         controls,
         ..
-    } = layer.source.clone()
+    } = layer.get_untracked().source
     else {
         return ().into_any();
     };
 
     let effect_id_str = effect_id.to_string();
+    let ws = expect_context::<crate::app::WsContext>();
     let detail = api::daemon_resource({
         let effect_id_str = effect_id_str.clone();
         move || {
             let effect_id_str = effect_id_str.clone();
-            async move { api::fetch_effect_detail(&effect_id_str).await }
+            let generation = ws.connection_generation.get();
+            async move {
+                if let Some((epoch, detail)) =
+                    effect_cache.with_value(|cache| cache.get(&effect_id_str).cloned())
+                    && epoch == generation
+                {
+                    return Ok(detail);
+                }
+                let detail = api::fetch_effect_detail(&effect_id_str).await?;
+                effect_cache.try_update_value(|cache| {
+                    cache.insert(effect_id_str, (generation, detail.clone()));
+                });
+                Ok::<_, api::ApiError>(detail)
+            }
         }
     });
+    // A same-effect layer replacement retires its write session, but its
+    // controls need not collapse to a loading placeholder while it mounts.
+    let detail_value = Signal::derive(move || {
+        detail.get().and_then(Result::ok).or_else(|| {
+            effect_cache
+                .with_value(|cache| cache.get(&effect_id_str).map(|(_, detail)| detail.clone()))
+        })
+    });
     let defs = Signal::derive(move || {
-        detail
+        detail_value
             .get()
-            .and_then(Result::ok)
             .map(|detail| detail.controls)
             .unwrap_or_default()
     });
     let screen_reactive = Signal::derive(move || {
-        detail.get().and_then(Result::ok).is_some_and(|detail| {
+        detail_value.get().is_some_and(|detail| {
             detail
                 .tags
                 .iter()
@@ -76,7 +98,7 @@ pub fn EffectControlsSection(
     // Optimistic local control values. Layer identity fences stale patches,
     // so the canonical control route carries no revision token.
     let (values, set_values) = signal(controls);
-    let layer_id = layer.id.to_string();
+    let layer_id = layer.get_untracked().id.to_string();
 
     let session_target = Signal::stored(Some(format!("{zone_id}:{layer_id}")));
     let patch: ControlPatchFn = Arc::new({
@@ -103,39 +125,44 @@ pub fn EffectControlsSection(
         on_error: Callback::new(|error: String| {
             toasts::toast_error(&format!("Effect controls failed: {error}"));
         }),
-        recover: on_layers_mutated,
+        recover: Callback::new(move |()| {
+            // A rejected edit can leave the server snapshot unchanged, so
+            // memo equality will not trigger the normal reconciliation effect.
+            if let LayerSource::Effect { controls, .. } = layer.get_untracked().source {
+                set_values.set(controls);
+            }
+            on_layers_mutated.run(());
+        }),
         on_committed: None,
         flush_guard: None,
     });
+    Effect::new(move |_| {
+        if let LayerSource::Effect { controls, .. } = layer.get().source {
+            session.reconcile_values.run(controls);
+        }
+    });
     let on_change = session.on_change;
 
     view! {
         <div class="space-y-2">
             <span class=label_class(LabelSize::Micro, LabelTone::Default)>"Effect controls"</span>
-            {move || {
-                if detail.get().is_none() {
-                    view! {
-                        <div class="rounded-lg border border-edge-subtle/50 bg-surface-sunken/40 px-3 py-4 text-center text-[11px] text-fg-tertiary/55">
-                            "Loading controls…"
-                        </div>
-                    }
-                        .into_any()
-                } else {
-                    view! {
-                        <ControlPanel
-                            controls=defs
-                            control_values=values
-                            accent_rgb=Signal::derive(|| LAYER_ACCENT_RGB.to_owned())
-                            on_change=on_change
-                        />
-                        <CaptureSharedControls
-                            visible=screen_reactive
-                            accent_rgb=Signal::derive(|| LAYER_ACCENT_RGB.to_owned())
-                        />
-                    }
-                        .into_any()
+            <Show
+                when=move || detail_value.get().is_some()
+                fallback=move || view! {
+                    <div class="rounded-lg border border-edge-subtle/50 bg-surface-sunken/40 px-3 py-4 text-center text-[11px] text-fg-tertiary/55">"Loading controls…"</div>
                 }
-            }}
+            >
+                <ControlPanel
+                    controls=defs
+                    control_values=values
+                    accent_rgb=Signal::derive(|| LAYER_ACCENT_RGB.to_owned())
+                    on_change=on_change
+                />
+                <CaptureSharedControls
+                    visible=screen_reactive
+                    accent_rgb=Signal::derive(|| LAYER_ACCENT_RGB.to_owned())
+                />
+            </Show>
         </div>
     }
     .into_any()
@@ -147,26 +174,31 @@ pub fn EffectControlsSection(
 #[component]
 pub fn MediaPlaybackSection(
     zone_id: String,
-    layer: SceneLayer,
-    revision: u64,
+    layer: Signal<SceneLayer>,
+    revision: Signal<u64>,
     on_layers_mutated: Callback<()>,
 ) -> impl IntoView {
-    let LayerSource::Media { playback, .. } = layer.source.clone() else {
+    let LayerSource::Media { playback, .. } = layer.get_untracked().source else {
         return ().into_any();
     };
-    let speed = playback.speed;
-    let loop_mode = playback.loop_mode;
-    let auto_play = playback.auto_play;
+    let playback = Memo::new(move |_| match layer.get().source {
+        LayerSource::Media { playback, .. } => playback,
+        _ => playback.clone(),
+    });
 
     // Rebuild the layer with a mutated `MediaPlayback` and push it.
     let push = {
-        let layer = layer.clone();
         move |mutate: &dyn Fn(&mut hypercolor_types::layer::MediaPlayback)| {
-            let mut next = layer.clone();
+            let mut next = layer.get_untracked();
             if let LayerSource::Media { playback, .. } = &mut next.source {
                 mutate(playback);
             }
-            update_layer(zone_id.clone(), next, revision, on_layers_mutated);
+            update_layer(
+                zone_id.clone(),
+                next,
+                revision.get_untracked(),
+                on_layers_mutated,
+            );
         }
     };
     let push_speed = push.clone();
@@ -177,12 +209,14 @@ pub fn MediaPlaybackSection(
         ("ping_pong".to_owned(), "Ping-pong".to_owned()),
         ("none".to_owned(), "Play once".to_owned()),
     ];
-    let loop_value = match loop_mode {
-        LoopMode::Loop => "loop",
-        LoopMode::PingPong => "ping_pong",
-        LoopMode::None => "none",
-    }
-    .to_owned();
+    let loop_value = move || {
+        match playback.get().loop_mode {
+            LoopMode::Loop => "loop",
+            LoopMode::PingPong => "ping_pong",
+            LoopMode::None => "none",
+        }
+        .to_owned()
+    };
 
     view! {
         <div class="space-y-3">
@@ -195,17 +229,17 @@ pub fn MediaPlaybackSection(
                     max="4"
                     step="0.05"
                     class="w-full accent-accent"
-                    prop:value=format!("{speed:.2}")
+                    prop:value=move || format!("{:.2}", playback.get().speed)
                     on:change=move |event| {
                         if let Some(value) = Change::from_event(event).value::<f32>() {
                             push_speed(&|playback| playback.speed = value.clamp(0.1, 4.0));
                         }
                     }
                 />
-                <span class="text-right tabular-nums">{format!("{speed:.2}×")}</span>
+                <span class="text-right tabular-nums">{move || format!("{:.2}×", playback.get().speed)}</span>
             </label>
             <crate::components::silk_select::SilkSelect
-                value=Signal::derive(move || loop_value.clone())
+                value=Signal::derive(loop_value)
                 options=Signal::derive(move || loop_options.clone())
                 on_change=Callback::new(move |value: String| {
                     let mode = match value.as_str() {
@@ -223,31 +257,29 @@ pub fn MediaPlaybackSection(
                 type="button"
                 class="flex w-full items-center justify-between rounded-lg border border-edge-subtle/60 bg-surface-sunken/40 px-3 py-2 text-[11px] text-fg-secondary chip-interactive"
                 on:click=move |_| {
-                    push_auto(&|playback| playback.auto_play = !auto_play);
+                    push_auto(&|playback| playback.auto_play = !playback.auto_play);
                 }
             >
                 <span>"Auto-play"</span>
-                <LayerToggleTrack on=auto_play />
+                <LayerToggleTrack on=Signal::derive(move || playback.get().auto_play) />
             </button>
         </div>
     }
     .into_any()
 }
 
-/// A compact Luminary toggle track — the switch visual without its own
-/// label row, for embedding in a layer card. The card rebuilds on every
-/// layer change, so a plain `bool` tracks state without a signal.
+/// A compact toggle track that follows the current layer playback state.
 #[component]
-pub fn LayerToggleTrack(on: bool) -> impl IntoView {
+pub fn LayerToggleTrack(#[prop(into)] on: Signal<bool>) -> impl IntoView {
     view! {
         <span
             class="relative inline-block h-4 w-7 shrink-0 rounded-full transition-colors duration-200"
-            class=("bg-accent/55", on)
-            class=("bg-fg-tertiary/20", !on)
+            class=("bg-accent/55", move || on.get())
+            class=("bg-fg-tertiary/20", move || !on.get())
         >
             <span
                 class="absolute left-0.5 top-0.5 h-3 w-3 rounded-full bg-white/85 transition-transform duration-200"
-                class=("translate-x-3", on)
+                class=("translate-x-3", move || on.get())
             />
         </span>
     }
diff --git a/crates/hypercolor-ui/src/components/layer_panel/mod.rs b/crates/hypercolor-ui/src/components/layer_panel/mod.rs
index fcd374125..8fda324d2 100644
--- a/crates/hypercolor-ui/src/components/layer_panel/mod.rs
+++ b/crates/hypercolor-ui/src/components/layer_panel/mod.rs
@@ -51,6 +51,9 @@ use source::{
     resolve_add_layer_targets,
 };
 
+/// Effect schemas survive layer replacements; a reconnect invalidates their epoch.
+pub type LayerEffectCache = StoredValue<HashMap<String, (u64, api::effects::EffectDetailResponse)>>;
+
 /// Layer-stack editor for one zone. See the module docs for the
 /// mount contract.
 #[component]
@@ -66,6 +69,10 @@ pub fn LayerPanel(
     layers_resource: LocalResource<api::ApiResult<api::LayerStackResponse>>,
     on_layers_mutated: Callback<()>,
 ) -> impl IntoView {
+    let effect_cache = LayerEffectCache::new(HashMap::new());
+    // Disclosure preference belongs to a visible stack slot, independently of
+    // the fresh layer authority minted by a whole-layer replacement.
+    let disclosures = StoredValue::new(HashMap::<(String, String, usize), bool>::new());
     // Content selection is owned here, not driven by the host page — the
     // asset list backs both media-name resolution and the picker's Media tab.
     let assets_resource = api::daemon_resource(|| async { api::list_assets().await });
@@ -105,6 +112,31 @@ pub fn LayerPanel(
             .map(|stack| stack.revision)
     });
 
+    let layers = Memo::new(move |_| {
+        layers_resource
+            .get()
+            .and_then(Result::ok)
+            .map(|stack| stack.items)
+            .unwrap_or_default()
+    });
+    let scene_id = Memo::new(move |_| {
+        active_scene
+            .get()
+            .map(|scene| scene.id.to_string())
+            .unwrap_or_default()
+    });
+    let revision = Signal::derive(move || scene_revision.get().unwrap_or_default());
+    let row_keys = Memo::new(move |_| {
+        let scene = scene_id.get();
+        let zone = selected_zone_id.get().unwrap_or_default();
+        layers
+            .get()
+            .into_iter()
+            .rev()
+            .map(|layer| (scene.clone(), zone.clone(), layer_mount_key(&layer)))
+            .collect::<Vec<_>>()
+    });
+
     // Per-layer runtime health streams in over the WebSocket, independent
     // of the layer stack itself; an absent context means no health yet.
     let ws = use_context::<WsContext>();
@@ -251,98 +283,62 @@ pub fn LayerPanel(
                     "Add layer"
                 </button>
 
-                <Suspense fallback=move || view! { <LayerLoadingSkeleton /> }>
-                    {move || match layers_resource.get() {
-                        None => view! { <LayerLoadingSkeleton /> }.into_any(),
-                        Some(Err(error)) => view! {
-                            <div class="rounded-lg border border-status-error/30 bg-status-error/10 px-3 py-3 text-xs text-status-error">
-                                {error.to_string()}
-                            </div>
-                        }.into_any(),
-                        Some(Ok(stack)) if stack.items.is_empty() => {
-                            // A screen may still be painting its stored
-                            // default face; only the scene's own stack is
-                            // empty, and the card above the panel says so.
-                            let copy = if selected_zone_role.get() == Some(ZoneRole::Display) {
-                                "No scene layers on this screen"
-                            } else {
-                                "No layers in this zone"
-                            };
-                            view! {
-                                <div class="rounded-lg border border-edge-subtle bg-surface-sunken/45 px-3 py-8 text-center text-xs text-fg-tertiary">
-                                    {copy}
-                                </div>
-                            }.into_any()
-                        }
-                        Some(Ok(stack)) => {
-                            // `try_get`: Suspense can re-poll this closure after
-                            // the panel instance owning these memos is disposed
-                            // (host swapped the mounted view mid-fetch). A plain
-                            // `get` panics the whole reactive runtime there.
-                            let (Some(names), Some(effect_name_map)) =
-                                (media_names.try_get(), effect_names.try_get())
-                            else {
-                                return view! { <LayerLoadingSkeleton /> }.into_any();
-                            };
-                            let scene_id = active_scene
-                                .get()
-                                .map(|scene| scene.id.to_string())
-                                .unwrap_or_default();
-                            let zone_id = selected_zone_id.get().unwrap_or_default();
-                            let revision = stack.revision;
-                            let total = stack.items.len();
-                            let mut rows = stack
-                                .items
-                                .iter()
-                                .cloned()
-                                .enumerate()
-                                .collect::<Vec<_>>();
-                            rows.reverse();
-                            // The Top/Bottom stack markers orient a real
-                            // stack; with a single layer there is no
-                            // ordering to convey, so they stay hidden.
-                            let show_stack_markers = total > 1;
+                <Show when=move || layers_resource.get().is_none()>
+                    <LayerLoadingSkeleton />
+                </Show>
+                {move || layers_resource.get().and_then(Result::err).map(|error| view! {
+                    <div class="rounded-lg border border-status-error/30 bg-status-error/10 px-3 py-3 text-xs text-status-error">{error.to_string()}</div>
+                })}
+                <Show when=move || layers_resource.get().is_some_and(|result| result.is_ok()) && layers.with(Vec::is_empty)>
+                    <div class="rounded-lg border border-edge-subtle bg-surface-sunken/45 px-3 py-8 text-center text-xs text-fg-tertiary">
+                        {move || if selected_zone_role.get() == Some(ZoneRole::Display) { "No scene layers on this screen" } else { "No layers in this zone" }}
+                    </div>
+                </Show>
+                <div class="space-y-2">
+                    <Show when=move || layers.with(|layers| layers.len() > 1)>
+                        <div class="text-[10px] font-mono uppercase tracking-wide text-fg-tertiary/65">"Top"</div>
+                    </Show>
+                    <For
+                        each=move || row_keys.get()
+                        key=|key| key.clone()
+                        children=move |(scene_id, zone_id, (layer_id, _))| {
+                            let initial = layers.with_untracked(|layers| layers.iter().find(|layer| layer.id.to_string() == layer_id).cloned()).expect("keyed layer is present when mounted");
+                            let lookup_id = layer_id.clone();
+                            let current_layer = Memo::new(move |_| {
+                                layers.with(|layers| layers.iter().find(|layer| layer.id.to_string() == lookup_id).cloned()).unwrap_or_else(|| initial.clone())
+                            });
+                            let stack_index = Signal::derive(move || layers.with(|layers| layers.iter().position(|layer| layer.id.to_string() == layer_id).unwrap_or_default()));
+                            let disclosure_key = (scene_id.clone(), zone_id.clone(), stack_index.get_untracked());
+                            let expanded = disclosures.with_value(|states| states.get(&disclosure_key).copied().unwrap_or(false));
+                            let on_disclosure = Callback::new(move |open| {
+                                let mut key = disclosure_key.clone();
+                                key.2 = stack_index.get_untracked();
+                                disclosures.update_value(|states| { states.insert(key, open); });
+                            });
+                            let row_health_key = layer_health_key(&scene_id, &zone_id, &current_layer.get_untracked().id.to_string());
+                            let row_health = Signal::derive(move || layer_health.with(|map| map.get(&row_health_key).cloned()));
                             view! {
-                                <div class="space-y-2">
-                                    {show_stack_markers.then(|| view! {
-                                        <div class="text-[10px] font-mono uppercase tracking-wide text-fg-tertiary/65">
-                                            "Top"
-                                        </div>
-                                    })}
-                                    {rows.into_iter().map(|(stack_index, layer)| {
-                                        let row_health_key = layer_health_key(
-                                            &scene_id,
-                                            &zone_id,
-                                            &layer.id.to_string(),
-                                        );
-                                        let row_health = Signal::derive(move || {
-                                            layer_health.with(|map| map.get(&row_health_key).cloned())
-                                        });
-                                        view! {
-                                            <LayerRow
-                                                zone_id=zone_id.clone()
-                                                layer=layer
-                                                stack_index=stack_index
-                                                total_layers=total
-                                                stack=stack.items.clone()
-                                                revision=revision
-                                                media_names=names.clone()
-                                                effect_names=effect_name_map.clone()
-                                                health=row_health
-                                                on_layers_mutated=on_layers_mutated
-                                            />
-                                        }
-                                    }).collect_view()}
-                                    {show_stack_markers.then(|| view! {
-                                        <div class="text-[10px] font-mono uppercase tracking-wide text-fg-tertiary/65">
-                                            "Bottom"
-                                        </div>
-                                    })}
-                                </div>
-                            }.into_any()
+                                <LayerRow
+                                    zone_id=zone_id
+                                    layer=current_layer.into()
+                                    stack_index=stack_index
+                                    stack=layers.into()
+                                    revision=revision
+                                    media_names=media_names
+                                    effect_names=effect_names
+                                    effect_cache=effect_cache
+                                    expanded=expanded
+                                    on_disclosure=on_disclosure
+                                    health=row_health
+                                    on_layers_mutated=on_layers_mutated
+                                />
+                            }
                         }
-                    }}
-                </Suspense>
+                    />
+                    <Show when=move || layers.with(|layers| layers.len() > 1)>
+                        <div class="text-[10px] font-mono uppercase tracking-wide text-fg-tertiary/65">"Bottom"</div>
+                    </Show>
+                </div>
             </div>
 
             <Show when=move || show_picker.get()>
@@ -436,3 +432,16 @@ fn reorder_layer(
         }
     });
 }
+
+/// Keep editors mounted across value/revision changes, but retire a session
+/// when its layer or source identity changes.
+#[must_use]
+pub fn layer_mount_key(layer: &SceneLayer) -> (String, String) {
+    use hypercolor_types::layer::LayerSource;
+    let source = match &layer.source {
+        LayerSource::Effect { effect_id, .. } => format!("effect:{effect_id}"),
+        LayerSource::Media { asset_id, .. } => format!("media:{asset_id}"),
+        other => row::source_meta(other).2.to_owned(),
+    };
+    (layer.id.to_string(), source)
+}
diff --git a/crates/hypercolor-ui/src/components/layer_panel/row.rs b/crates/hypercolor-ui/src/components/layer_panel/row.rs
index 41085e276..f2619bc84 100644
--- a/crates/hypercolor-ui/src/components/layer_panel/row.rs
+++ b/crates/hypercolor-ui/src/components/layer_panel/row.rs
@@ -64,46 +64,34 @@ pub fn layer_title(
 #[component]
 pub fn LayerRow(
     zone_id: String,
-    layer: SceneLayer,
-    stack_index: usize,
-    total_layers: usize,
-    stack: Vec<SceneLayer>,
-    revision: u64,
-    media_names: HashMap<String, String>,
-    effect_names: HashMap<String, String>,
+    layer: Signal<SceneLayer>,
+    stack_index: Signal<usize>,
+    stack: Signal<Vec<SceneLayer>>,
+    revision: Signal<u64>,
+    media_names: Memo<HashMap<String, String>>,
+    effect_names: Memo<HashMap<String, String>>,
+    effect_cache: super::LayerEffectCache,
+    expanded: bool,
+    on_disclosure: Callback<bool>,
     #[prop(into)] health: Signal<Option<LayerHealth>>,
     on_layers_mutated: Callback<()>,
 ) -> impl IntoView {
-    let (icon, accent_rgb, kind_word) = source_meta(&layer.source);
-    let title = layer_title(&layer, &media_names, &effect_names, kind_word);
-    let layer_id = layer.id.to_string();
-    let is_effect = matches!(layer.source, LayerSource::Effect { .. });
-    let is_media = matches!(layer.source, LayerSource::Media { .. });
-    // A lone layer has nowhere to move; reorder appears only in a stack.
-    let show_reorder = total_layers > 1;
-    let can_move_up = stack_index + 1 < total_layers;
-    let can_move_down = stack_index > 0;
-    let opacity = layer.opacity;
-    let blend = layer.blend;
-    let fit = layer.transform.fit;
-    let brightness = layer.adjust.brightness;
-    let saturation = layer.adjust.saturation;
-    let tint_strength = layer.adjust.tint_strength;
-    let scale_x = layer.transform.scale[0];
-    let scale_y = layer.transform.scale[1];
-
-    let blend_layer = layer.clone();
-    let opacity_layer = layer.clone();
-    let fit_layer = layer.clone();
-    let brightness_layer = layer.clone();
-    let saturation_layer = layer.clone();
-    let tint_layer = layer.clone();
-    let scale_x_layer = layer.clone();
-    let scale_y_layer = layer.clone();
-    let effect_layer = layer.clone();
-    let media_layer = layer.clone();
-    let move_up_stack = stack.clone();
-    let move_down_stack = stack;
+    let initial = layer.get_untracked();
+    let (icon, accent_rgb, kind_word) = source_meta(&initial.source);
+    let title = move || {
+        layer_title(
+            &layer.get(),
+            &media_names.get(),
+            &effect_names.get(),
+            kind_word,
+        )
+    };
+    let layer_id = initial.id.to_string();
+    let is_effect = matches!(initial.source, LayerSource::Effect { .. });
+    let is_media = matches!(initial.source, LayerSource::Media { .. });
+    let show_reorder = move || stack.with(|layers| layers.len() > 1);
+    let can_move_up = move || stack_index.get() + 1 < stack.with(Vec::len);
+    let can_move_down = move || stack_index.get() > 0;
 
     let chip_style = format!("background: rgba({accent_rgb}, 0.14)");
     let icon_style = format!("color: rgb({accent_rgb})");
@@ -130,24 +118,24 @@ pub fn LayerRow(
                     </span>
                 </div>
                 <div class="flex shrink-0 items-center gap-1">
-                    {show_reorder
+                    {let zone_id = zone_id.clone(); move || show_reorder()
                         .then(|| {
                             let zone_up = zone_id.clone();
                             let zone_down = zone_id.clone();
-                            let up_stack = move_up_stack.clone();
-                            let down_stack = move_down_stack.clone();
+                            let up_stack = stack;
+                            let down_stack = stack;
                             view! {
                                 <button
                                     type="button"
                                     class="rounded-md p-1.5 text-fg-tertiary transition-colors hover:text-fg-primary disabled:opacity-25"
-                                    disabled=!can_move_up
+                                    disabled=move || !can_move_up()
                                     title="Move layer up"
                                     on:click=move |_| reorder_layer(
                                         zone_up.clone(),
-                                        up_stack.clone(),
-                                        stack_index,
+                                        up_stack.get_untracked(),
+                                        stack_index.get_untracked(),
                                         1,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     )
                                 >
@@ -156,14 +144,14 @@ pub fn LayerRow(
                                 <button
                                     type="button"
                                     class="rounded-md p-1.5 text-fg-tertiary transition-colors hover:text-fg-primary disabled:opacity-25"
-                                    disabled=!can_move_down
+                                    disabled=move || !can_move_down()
                                     title="Move layer down"
                                     on:click=move |_| reorder_layer(
                                         zone_down.clone(),
-                                        down_stack.clone(),
-                                        stack_index,
+                                        down_stack.get_untracked(),
+                                        stack_index.get_untracked(),
                                         -1,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     )
                                 >
@@ -181,7 +169,7 @@ pub fn LayerRow(
                             move |_| delete_layer(
                                 zone_id.clone(),
                                 layer_id.clone(),
-                                revision,
+                                revision.get_untracked(),
                                 on_layers_mutated,
                             )
                         }
@@ -195,17 +183,17 @@ pub fn LayerRow(
                 // ── Blend ─────────────────────────────────────────────
                 <div class="min-w-0">
                         <SilkSelect
-                            value=Signal::derive(move || blend_value(blend).to_owned())
+                            value=Signal::derive(move || blend_value(layer.get().blend).to_owned())
                             options=Signal::derive(blend_options)
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: String| {
-                                    let mut next = blend_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.blend = parse_blend(&value);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -230,17 +218,17 @@ pub fn LayerRow(
                         max="1"
                         step="0.01"
                         class="slider-silk min-w-0 flex-1 cursor-pointer"
-                        prop:value=format!("{opacity:.2}")
+                        prop:value=move || format!("{:.2}", layer.get().opacity)
                         on:change={
                             let zone_id = zone_id.clone();
                             move |event| {
                                 if let Some(value) = Change::from_event(event).value::<f32>() {
-                                    let mut next = opacity_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.opacity = value.clamp(0.0, 1.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -251,7 +239,7 @@ pub fn LayerRow(
                         class="w-[40px] shrink-0 rounded px-1.5 py-0.5 text-right font-mono text-[10px] tabular-nums"
                         style="color: rgba(225, 53, 255, 0.85); background: rgba(225, 53, 255, 0.1)"
                     >
-                        {format!("{:.0}%", opacity * 100.0)}
+                        {move || format!("{:.0}%", layer.get().opacity * 100.0)}
                     </span>
                 </div>
 
@@ -262,7 +250,8 @@ pub fn LayerRow(
                             <div class="border-t border-edge-subtle/40 pt-3">
                                 <EffectControlsSection
                                     zone_id=zone_id.clone()
-                                    layer=effect_layer.clone()
+                                    layer=layer
+                                    effect_cache=effect_cache
                                     on_layers_mutated=on_layers_mutated
                                 />
                             </div>
@@ -274,7 +263,7 @@ pub fn LayerRow(
                             <div class="border-t border-edge-subtle/40 pt-3">
                                 <MediaPlaybackSection
                                     zone_id=zone_id.clone()
-                                    layer=media_layer.clone()
+                                    layer=layer
                                     revision=revision
                                     on_layers_mutated=on_layers_mutated
                                 />
@@ -283,24 +272,35 @@ pub fn LayerRow(
                     })}
 
                 // ── Transform & color disclosure ──────────────────────
-                <details class="rounded-lg border border-edge-subtle/55 bg-surface-overlay/25">
+                <details
+                    class="rounded-lg border border-edge-subtle/55 bg-surface-overlay/25"
+                    open=expanded
+                    on:toggle=move |event| {
+                        let element: web_sys::Element = event_target(&event);
+                        // Removal can dispatch a final toggle; it must not
+                        // overwrite the preference adopted by the new row.
+                        if element.is_connected() {
+                            on_disclosure.run(element.has_attribute("open"));
+                        }
+                    }
+                >
                     <summary class="flex cursor-pointer items-center gap-1.5 px-3 py-2 text-[11px] font-semibold text-fg-secondary">
                         <Icon icon=LuChevronRight width="12px" height="12px" />
                         "Transform & Color"
                     </summary>
                     <div class="space-y-3 border-t border-edge-subtle/45 px-3 py-3">
                         <SilkSelect
-                            value=Signal::derive(move || fit_value(fit).to_owned())
+                            value=Signal::derive(move || fit_value(layer.get().transform.fit).to_owned())
                             options=Signal::derive(fit_options)
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: String| {
-                                    let mut next = fit_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.transform.fit = parse_fit(&value);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -311,19 +311,19 @@ pub fn LayerRow(
                         />
                         <LayerSlider
                             label="Brightness"
-                            value=brightness
+                            value=Signal::derive(move || layer.get().adjust.brightness)
                             min=0.0
                             max=4.0
                             step=0.05
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: f32| {
-                                    let mut next = brightness_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.adjust.brightness = value.clamp(0.0, 4.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -331,19 +331,19 @@ pub fn LayerRow(
                         />
                         <LayerSlider
                             label="Saturation"
-                            value=saturation
+                            value=Signal::derive(move || layer.get().adjust.saturation)
                             min=0.0
                             max=4.0
                             step=0.05
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: f32| {
-                                    let mut next = saturation_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.adjust.saturation = value.clamp(0.0, 4.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -351,19 +351,19 @@ pub fn LayerRow(
                         />
                         <LayerSlider
                             label="Tint"
-                            value=tint_strength
+                            value=Signal::derive(move || layer.get().adjust.tint_strength)
                             min=0.0
                             max=1.0
                             step=0.01
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: f32| {
-                                    let mut next = tint_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.adjust.tint_strength = value.clamp(0.0, 1.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -371,19 +371,19 @@ pub fn LayerRow(
                         />
                         <LayerSlider
                             label="Scale X"
-                            value=scale_x
+                            value=Signal::derive(move || layer.get().transform.scale[0])
                             min=0.1
                             max=4.0
                             step=0.05
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: f32| {
-                                    let mut next = scale_x_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.transform.scale[0] = value.clamp(0.1, 4.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -391,19 +391,19 @@ pub fn LayerRow(
                         />
                         <LayerSlider
                             label="Scale Y"
-                            value=scale_y
+                            value=Signal::derive(move || layer.get().transform.scale[1])
                             min=0.1
                             max=4.0
                             step=0.05
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: f32| {
-                                    let mut next = scale_y_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.transform.scale[1] = value.clamp(0.1, 4.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -419,7 +419,7 @@ pub fn LayerRow(
 #[component]
 fn LayerSlider(
     label: &'static str,
-    value: f32,
+    value: Signal<f32>,
     min: f32,
     max: f32,
     step: f32,
@@ -434,14 +434,14 @@ fn LayerSlider(
                 max=max.to_string()
                 step=step.to_string()
                 class="w-full accent-accent"
-                prop:value=format!("{value:.2}")
+                prop:value=move || format!("{:.2}", value.get())
                 on:change=move |event| {
                     if let Some(value) = Change::from_event(event).value::<f32>() {
                         on_change.run(value);
                     }
                 }
             />
-            <span class="text-right tabular-nums">{format!("{value:.2}")}</span>
+            <span class="text-right tabular-nums">{move || format!("{:.2}", value.get())}</span>
         </label>
     }
 }
diff --git a/crates/hypercolor-ui/src/control_session.rs b/crates/hypercolor-ui/src/control_session.rs
index dbc971039..11a7780f8 100644
--- a/crates/hypercolor-ui/src/control_session.rs
+++ b/crates/hypercolor-ui/src/control_session.rs
@@ -85,6 +85,8 @@ pub struct ControlPatchSession {
     pub flush_now: Callback<()>,
     /// Drop any queued-but-unsent edits.
     pub clear_pending: Callback<()>,
+    /// Adopt server values while preserving this target's unconfirmed edits.
+    pub reconcile_values: Callback<ControlValueMap>,
     /// Live version token echoed as `If-Match`; `None` for unversioned
     /// surfaces. Adopted from `Applied`/`Stale` outcomes automatically.
     pub version: RwSignal<Option<u64>>,
@@ -212,6 +214,7 @@ pub fn use_control_patch_session(config: ControlPatchConfig) -> ControlPatchSess
                     }
                     let mut retried = false;
                     loop {
+                        optimistic.track_in_flight(&batch);
                         let outcome = patch(
                             batch.target.clone(),
                             batch.values.clone(),
@@ -304,11 +307,18 @@ pub fn use_control_patch_session(config: ControlPatchConfig) -> ControlPatchSess
     let flush_now = Callback::new(move |()| flush_core());
     let clear_pending = Callback::new(move |()| optimistic.clear_pending());
 
+    let reconcile_values = Callback::new(move |values| {
+        if let Some(target) = target.get_untracked() {
+            set_values.set(optimistic.reconcile_values(&target, values));
+        }
+    });
+
     ControlPatchSession {
         on_change,
         on_changes,
         flush_now,
         clear_pending,
+        reconcile_values,
         version,
     }
 }
diff --git a/crates/hypercolor-ui/src/optimistic_controls.rs b/crates/hypercolor-ui/src/optimistic_controls.rs
index fc437e814..18f37b7e4 100644
--- a/crates/hypercolor-ui/src/optimistic_controls.rs
+++ b/crates/hypercolor-ui/src/optimistic_controls.rs
@@ -22,7 +22,7 @@ pub(crate) struct OptimisticControlSession {
 #[derive(Default)]
 struct ControlMutationQueue {
     pending: Option<ControlMutationBatch>,
-    in_flight: bool,
+    in_flight: Option<ControlMutationBatch>,
 }
 
 impl ControlMutationQueue {
@@ -45,7 +45,7 @@ impl ControlMutationQueue {
     }
 
     fn start_flush_for(&mut self, active_target: &str) -> Result<Option<ControlMutationBatch>, ()> {
-        if self.in_flight {
+        if self.in_flight.is_some() {
             return Ok(None);
         }
         let Some(batch) = self.pending.take() else {
@@ -54,16 +54,18 @@ impl ControlMutationQueue {
         if batch.target != active_target {
             return Err(());
         }
-        self.in_flight = true;
+        self.in_flight = Some(batch.clone());
         Ok(Some(batch))
     }
 
     fn complete_flush(&mut self) -> Option<ControlMutationBatch> {
         if self.pending.is_none() {
-            self.in_flight = false;
+            self.in_flight = None;
             None
         } else {
-            self.pending.take()
+            let next = self.pending.take();
+            self.in_flight = next.clone();
+            next
         }
     }
 
@@ -71,7 +73,7 @@ impl ControlMutationQueue {
         &mut self,
         active_target: &str,
     ) -> Result<Option<ControlMutationBatch>, ()> {
-        self.in_flight = false;
+        self.in_flight = None;
         self.start_flush_for(active_target)
     }
 
@@ -86,9 +88,21 @@ impl ControlMutationQueue {
         }
     }
 
+    fn reconcile_values(&self, target: &str, mut values: ControlValueMap) -> ControlValueMap {
+        for batch in [self.in_flight.as_ref(), self.pending.as_ref()]
+            .into_iter()
+            .flatten()
+        {
+            if batch.target == target {
+                merge_control_values(&mut values, &batch.values);
+            }
+        }
+        values
+    }
+
     fn fail_flush(&mut self) {
         self.pending = None;
-        self.in_flight = false;
+        self.in_flight = None;
     }
 
     fn clear_pending(&mut self) {
@@ -166,6 +180,16 @@ impl OptimisticControlSession {
             .unwrap_or_default()
     }
 
+    pub(crate) fn reconcile_values(self, target: &str, values: ControlValueMap) -> ControlValueMap {
+        self.queue
+            .with_value(|queue| queue.reconcile_values(target, values))
+    }
+
+    pub(crate) fn track_in_flight(self, batch: &ControlMutationBatch) {
+        self.queue
+            .update_value(|queue| queue.in_flight = Some(batch.clone()));
+    }
+
     pub(crate) fn fail_flush(self) {
         let _ = self
             .queue
@@ -233,6 +257,42 @@ mod tests {
 
     use super::{ControlMutationQueue, ControlValueMap};
 
+    #[test]
+    fn server_snapshot_preserves_pending_and_in_flight_values_for_its_target() {
+        let mut queue = ControlMutationQueue::default();
+        queue.insert("layer-a".into(), "speed".into(), ControlValue::Float(0.5));
+        queue.start_flush_for("layer-a").expect("valid target");
+        queue.insert("layer-a".into(), "speed".into(), ControlValue::Float(0.8));
+        let server = ControlValueMap::from([
+            ("speed".into(), ControlValue::Float(0.2)),
+            ("hue".into(), ControlValue::Int(120)),
+        ]);
+        let merged = queue.reconcile_values("layer-a", server.clone());
+        assert_eq!(merged["speed"], ControlValue::Float(0.8));
+        assert_eq!(merged["hue"], ControlValue::Int(120));
+        assert_eq!(queue.reconcile_values("layer-b", server.clone()), server);
+        queue.complete_flush();
+        assert_eq!(
+            queue.reconcile_values("layer-a", server.clone())["speed"],
+            ControlValue::Float(0.8)
+        );
+        queue.complete_flush();
+        assert_eq!(queue.reconcile_values("layer-a", server.clone()), server);
+    }
+
+    #[test]
+    fn failed_patch_recovery_accepts_authoritative_values() {
+        let mut queue = ControlMutationQueue::default();
+        queue.insert("layer-a".into(), "speed".into(), ControlValue::Float(0.5));
+        queue.start_flush_for("layer-a").expect("valid target");
+        queue.fail_flush();
+        assert!(
+            queue
+                .reconcile_values("layer-a", ControlValueMap::new())
+                .is_empty()
+        );
+    }
+
     #[test]
     fn in_flight_flush_drains_distinct_newer_keys_in_a_second_batch() {
         let mut queue = ControlMutationQueue::default();
diff --git a/crates/hypercolor-ui/src/pages/studio/mod.rs b/crates/hypercolor-ui/src/pages/studio/mod.rs
index 663b2dcc7..b36c68fc3 100644
--- a/crates/hypercolor-ui/src/pages/studio/mod.rs
+++ b/crates/hypercolor-ui/src/pages/studio/mod.rs
@@ -254,27 +254,7 @@ pub fn StudioPage() -> impl IntoView {
                 }),
             _ => Ok(empty_layer_stack()),
         });
-        // Control events intentionally leave the structural scene cache alone.
-        // On selection, recover fresh control values and an If-Match revision
-        // if the latest event invalidated that cache. Reading the hint untracked
-        // keeps slider-rate events from rebuilding the inspector.
-        let refresh_zone = zone_id.filter(|id| {
-            id != UNASSIGNED_SURFACE_ID
-                && active_scene.with_untracked(Option::is_some)
-                && ws.last_scene_event.with_untracked(|hint| {
-                    hint.as_ref().is_some_and(|hint| {
-                        hint.event_type == "zone_changed"
-                            && hint.zone_change_kind
-                                == Some(hypercolor_types::event::ZoneChangeKind::ControlsPatched)
-                    })
-                })
-        });
-        async move {
-            match refresh_zone {
-                Some(zone_id) => api::list_layers(&zone_id).await,
-                None => stack,
-            }
-        }
+        async move { stack }
     });
 
     let on_layers_mutated = Callback::new(move |()| {
@@ -285,9 +265,13 @@ pub fn StudioPage() -> impl IntoView {
     // The selected Screen's face rides the display face endpoint, which
     // reports the scene layer or the stored default, whichever is live.
     // It refetches on selection, after every face write from this page,
-    // and on any scene event (the daemon publishes zone_changed for
+    // and on structural scene events (the daemon publishes zone_changed for
     // default-face writes too), so it never needs a timer.
     let (face_tick, set_face_tick) = signal(0_u64);
+    let face_scene_generation = Memo::new(move |_| {
+        ws.last_scene_event
+            .with(|hint| hint.as_ref().map_or(0, |hint| hint.structural_generation))
+    });
     let selected_screen_device = Memo::new(move |_| {
         let selected = selected_surface_id.get()?;
         let scene = active_scene.get()?;
@@ -295,7 +279,7 @@ pub fn StudioPage() -> impl IntoView {
     });
     let screen_face_resource = api::daemon_resource(move || {
         let _ = face_tick.get();
-        let _ = ws.last_scene_event.get();
+        let _ = face_scene_generation.get();
         let device_id = selected_screen_device.get();
         async move {
             match device_id {
diff --git a/crates/hypercolor-ui/src/ws/messages.rs b/crates/hypercolor-ui/src/ws/messages.rs
index e4606aad2..919a6531d 100644
--- a/crates/hypercolor-ui/src/ws/messages.rs
+++ b/crates/hypercolor-ui/src/ws/messages.rs
@@ -434,6 +434,13 @@ pub struct DeviceEventHint {
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub struct SceneEventHint {
     pub generation: u64,
+    /// Scene commits, excluding per-control notifications for the same commit.
+    pub scene_generation: u64,
+    /// Invalidation epochs survive later control hints in the same reactive turn.
+    pub structural_generation: u64,
+    pub active_effect_generation: u64,
+    /// Per-zone control epochs keep remote changes visible across batched hints.
+    pub control_generations: HashMap<String, u64>,
     pub event_type: String,
     pub scene_id: Option<String>,
     /// Zone (render zone) the event names, for zone-tagged events like
@@ -454,6 +461,29 @@ pub fn sequence_scene_event_hint(
     mut next: SceneEventHint,
 ) -> SceneEventHint {
     next.generation = previous.map_or(1, |hint| hint.generation.wrapping_add(1));
+    next.scene_generation = previous
+        .map_or(0, |hint| hint.scene_generation)
+        .wrapping_add(u64::from(next.event_type != "effect_control_changed"));
+    next.structural_generation = previous
+        .map_or(0, |hint| hint.structural_generation)
+        .wrapping_add(u64::from(!scene_event_is_control_change(&next)));
+    next.active_effect_generation = previous
+        .map_or(0, |hint| hint.active_effect_generation)
+        .wrapping_add(u64::from(scene_event_affects_active_effect(&next)));
+    if next.event_type != "active_scene_changed" {
+        next.control_generations = previous
+            .map(|hint| hint.control_generations.clone())
+            .unwrap_or_default();
+    }
+    if next.event_type == "zone_changed"
+        && next.zone_change_kind == Some(ZoneChangeKind::ControlsPatched)
+    {
+        let generation = next
+            .control_generations
+            .entry(next.zone_id.clone().unwrap_or_default())
+            .or_default();
+        *generation = generation.wrapping_add(1);
+    }
     next
 }
 
@@ -1281,6 +1311,10 @@ pub fn extract_scene_event_hint(
 
     SceneEventHint {
         generation: 0,
+        scene_generation: 0,
+        structural_generation: 0,
+        active_effect_generation: 0,
+        control_generations: HashMap::new(),
         event_type: event_type.to_owned(),
         scene_id: scene_data
             .get("current")
@@ -1341,6 +1375,9 @@ fn update_scene_event_hint(
 }
 
 pub fn scene_event_affects_active_effect(hint: &SceneEventHint) -> bool {
+    if scene_event_is_control_change(hint) {
+        return false;
+    }
     match hint.event_type.as_str() {
         // Library CRUD and scene-settings tweaks never change what's
         // rendering right now.
@@ -1350,6 +1387,28 @@ pub fn scene_event_affects_active_effect(hint: &SceneEventHint) -> bool {
     }
 }
 
+/// Control changes update the shared scene's values, not effect metadata or faces.
+pub fn scene_event_is_control_change(hint: &SceneEventHint) -> bool {
+    hint.event_type == "effect_control_changed"
+        || (hint.event_type == "zone_changed"
+            && hint.zone_change_kind == Some(ZoneChangeKind::ControlsPatched))
+}
+
+/// Whether the current effect needs metadata or authoritative controls refetched.
+pub fn scene_event_requires_effect_refresh(
+    previous: Option<&SceneEventHint>,
+    current: &SceneEventHint,
+    zone_id: Option<&str>,
+) -> bool {
+    current.active_effect_generation != previous.map_or(0, |hint| hint.active_effect_generation)
+        || current.control_generations.get("")
+            != previous.and_then(|hint| hint.control_generations.get(""))
+        || zone_id.is_some_and(|zone_id| {
+            current.control_generations.get(zone_id)
+                != previous.and_then(|hint| hint.control_generations.get(zone_id))
+        })
+}
+
 fn extract_device_event_hint(
     event_type: &str,
     data: Option<&serde_json::Value>,
diff --git a/crates/hypercolor-ui/src/zones.rs b/crates/hypercolor-ui/src/zones.rs
index c49c0c6fe..c25c27f1c 100644
--- a/crates/hypercolor-ui/src/zones.rs
+++ b/crates/hypercolor-ui/src/zones.rs
@@ -290,10 +290,21 @@ pub fn provide_scene_contexts(
         });
     });
 
-    // WS-driven freshness: any scene event refreshes the active scene
-    // (except pure control patches — those arrive at slider-drag rate
-    // and don't change scene structure); activation and library CRUD
-    // also refresh the list.
+    // A zone commit includes every control value and the new scene revision.
+    // Its per-control notifications share that invalidation, so a compound
+    // edit fetches one authoritative snapshot instead of one per control.
+    let scene_generation = Memo::new(move |_| {
+        last_scene_event.with(|hint| hint.as_ref().map_or(0, |hint| hint.scene_generation))
+    });
+    Effect::new(move |previous: Option<u64>| {
+        let current = scene_generation.get();
+        if previous.unwrap_or_default() != current {
+            active_scene_resource.refetch();
+        }
+        current
+    });
+
+    // Activation and library CRUD also refresh the saved-scene list.
     Effect::new(move |previous: Option<Option<SceneEventHint>>| {
         let current = last_scene_event.get();
         if previous.as_ref() == Some(&current) {
@@ -303,12 +314,6 @@ pub fn provide_scene_contexts(
             return current;
         };
 
-        let controls_only = hint.event_type == "zone_changed"
-            && hint.zone_change_kind
-                == Some(hypercolor_types::event::ZoneChangeKind::ControlsPatched);
-        if !controls_only {
-            active_scene_resource.refetch();
-        }
         if matches!(
             hint.event_type.as_str(),
             "active_scene_changed" | "scene_library_changed"
diff --git a/crates/hypercolor-ui/tests/layer_panel_tests.rs b/crates/hypercolor-ui/tests/layer_panel_tests.rs
index f58c9f2f4..6e0dc1dc1 100644
--- a/crates/hypercolor-ui/tests/layer_panel_tests.rs
+++ b/crates/hypercolor-ui/tests/layer_panel_tests.rs
@@ -25,6 +25,38 @@ use hypercolor_ui::components::layer_panel::source::{
 /// A valid UUID string for effect/media id parsing.
 const SAMPLE_ID: &str = "0192f5a0-1234-7890-abcd-ef0123456789";
 
+#[test]
+fn layer_editor_identity_survives_values_but_retires_replaced_sources() {
+    use hypercolor_ui::components::layer_panel::layer_mount_key;
+    let mut layer = SceneLayer {
+        id: SceneLayerId::new(),
+        name: None,
+        source: effect_layer_source(SAMPLE_ID).expect("valid effect"),
+        blend: BlendMode::Screen,
+        opacity: 1.0,
+        transform: LayerTransform::default(),
+        adjust: LayerAdjust::default(),
+        bindings: Vec::new(),
+        enabled: true,
+    };
+    let original = layer_mount_key(&layer);
+    layer.opacity = 0.5;
+    layer.name = Some("Renamed".into());
+    if let LayerSource::Effect { controls, .. } = &mut layer.source {
+        controls.insert(
+            "speed".into(),
+            hypercolor_types::control::ControlValue::Float(0.8),
+        );
+    }
+    assert_eq!(layer_mount_key(&layer), original);
+    layer.source =
+        effect_layer_source("0192f5a0-1234-7890-abcd-ef0123456790").expect("valid effect");
+    assert_ne!(layer_mount_key(&layer), original);
+    layer.source = effect_layer_source(SAMPLE_ID).expect("valid effect");
+    layer.id = SceneLayerId::new();
+    assert_ne!(layer_mount_key(&layer), original);
+}
+
 #[test]
 fn layer_replacement_uses_the_canonical_creation_shape() {
     let layer = SceneLayer {
diff --git a/crates/hypercolor-ui/tests/ws_messages_tests.rs b/crates/hypercolor-ui/tests/ws_messages_tests.rs
index f73d05b85..b1d676def 100644
--- a/crates/hypercolor-ui/tests/ws_messages_tests.rs
+++ b/crates/hypercolor-ui/tests/ws_messages_tests.rs
@@ -7,7 +7,8 @@ use hypercolor_ui::ws::messages::{
     OutputPowerReconciler, PerformanceMetrics, SCENE_EVENTS, extract_effect_error_hint,
     extract_layer_health, extract_scene_event_hint, initial_subscription_admission,
     is_resync_required, layer_health_key, reset_layer_health_cache,
-    scene_event_affects_active_effect, sequence_scene_event_hint, zone_has_degraded_layer,
+    scene_event_affects_active_effect, scene_event_requires_effect_refresh,
+    sequence_scene_event_hint, zone_has_degraded_layer,
 };
 
 #[test]
@@ -71,7 +72,7 @@ fn layout_changes_invalidate_layout_resources_without_control_chatter() {
 }
 
 #[test]
-fn control_changes_are_authoritative_scene_refresh_hints() {
+fn control_changes_do_not_invalidate_effect_metadata() {
     assert!(SCENE_EVENTS.contains(&"effect_control_changed"));
     let hint = extract_scene_event_hint(
         "effect_control_changed",
@@ -82,7 +83,142 @@ fn control_changes_are_authoritative_scene_refresh_hints() {
         }),
     );
     assert_eq!(hint.zone_id.as_deref(), Some("zone-2"));
-    assert!(scene_event_affects_active_effect(&hint));
+    assert!(!scene_event_affects_active_effect(&hint));
+}
+
+#[test]
+fn a_compound_control_edit_invalidates_the_scene_once_without_reloading_faces() {
+    let before = sequence_scene_event_hint(
+        None,
+        extract_scene_event_hint(
+            "active_scene_changed",
+            &serde_json::json!({"current": "scene-1"}),
+        ),
+    );
+    let commit = sequence_scene_event_hint(
+        Some(&before),
+        extract_scene_event_hint(
+            "zone_changed",
+            &serde_json::json!({"zone_id": "screen", "kind": "controls_patched", "role": "display"}),
+        ),
+    );
+    let first = sequence_scene_event_hint(
+        Some(&commit),
+        extract_scene_event_hint(
+            "effect_control_changed",
+            &serde_json::json!({"zone_id": "screen", "control_id": "glow"}),
+        ),
+    );
+    let second = sequence_scene_event_hint(
+        Some(&first),
+        extract_scene_event_hint(
+            "effect_control_changed",
+            &serde_json::json!({"zone_id": "screen", "control_id": "speed"}),
+        ),
+    );
+    assert_eq!(second.scene_generation, before.scene_generation + 1);
+    assert_eq!(second.control_generations.get("screen"), Some(&1));
+    assert_eq!(second.structural_generation, before.structural_generation);
+    assert!(!scene_event_requires_effect_refresh(
+        Some(&before),
+        &second,
+        Some("primary")
+    ));
+    assert!(scene_event_requires_effect_refresh(
+        Some(&before),
+        &second,
+        Some("screen")
+    ));
+}
+
+#[test]
+fn the_zone_commit_refreshes_primary_controls_without_per_control_notifications() {
+    let commit = sequence_scene_event_hint(
+        None,
+        extract_scene_event_hint(
+            "zone_changed",
+            &serde_json::json!({"zone_id": "primary", "kind": "controls_patched"}),
+        ),
+    );
+    assert_eq!(commit.scene_generation, 1);
+    assert!(scene_event_requires_effect_refresh(
+        None,
+        &commit,
+        Some("primary")
+    ));
+    assert!(!scene_event_requires_effect_refresh(
+        None,
+        &commit,
+        Some("screen")
+    ));
+}
+
+#[test]
+fn batched_control_hints_preserve_primary_and_structural_invalidations() {
+    let before = sequence_scene_event_hint(
+        None,
+        extract_scene_event_hint(
+            "active_scene_changed",
+            &serde_json::json!({"current": "scene-1"}),
+        ),
+    );
+    let primary = sequence_scene_event_hint(
+        Some(&before),
+        extract_scene_event_hint(
+            "zone_changed",
+            &serde_json::json!({"zone_id": "primary", "kind": "controls_patched"}),
+        ),
+    );
+    let screen = sequence_scene_event_hint(
+        Some(&primary),
+        extract_scene_event_hint(
+            "effect_control_changed",
+            &serde_json::json!({"zone_id": "screen"}),
+        ),
+    );
+    assert!(scene_event_requires_effect_refresh(
+        Some(&before),
+        &screen,
+        Some("primary")
+    ));
+
+    let structural = sequence_scene_event_hint(
+        Some(&screen),
+        extract_scene_event_hint(
+            "zone_changed",
+            &serde_json::json!({"zone_id": "primary", "role": "primary", "kind": "updated"}),
+        ),
+    );
+    let later_control = sequence_scene_event_hint(
+        Some(&structural),
+        extract_scene_event_hint(
+            "effect_control_changed",
+            &serde_json::json!({"zone_id": "screen"}),
+        ),
+    );
+    assert_eq!(
+        later_control.structural_generation,
+        screen.structural_generation + 1
+    );
+    assert!(scene_event_requires_effect_refresh(
+        Some(&screen),
+        &later_control,
+        Some("primary")
+    ));
+
+    let activated = sequence_scene_event_hint(
+        Some(&later_control),
+        extract_scene_event_hint(
+            "active_scene_changed",
+            &serde_json::json!({"current": "scene-2"}),
+        ),
+    );
+    assert!(activated.control_generations.is_empty());
+    assert!(scene_event_requires_effect_refresh(
+        Some(&later_control),
+        &activated,
+        Some("primary")
+    ));
 }
 
 #[test]
diff --git a/e2e/tests/studio-controls.spec.mjs b/e2e/tests/studio-controls.spec.mjs
new file mode 100644
index 000000000..ea482da0f
--- /dev/null
+++ b/e2e/tests/studio-controls.spec.mjs
@@ -0,0 +1,262 @@
+import { test, expect } from "@playwright/test";
+
+import { getStack } from "./helpers.mjs";
+
+const ZONE = "22222222-2222-4222-8222-222222222222";
+const EFFECT = "44444444-4444-4444-8444-444444444444";
+const LAYER = "55555555-5555-4555-8555-555555555555";
+const replacementId = (revision) => `55555555-5555-4555-8555-${String(revision).padStart(12, "0")}`;
+const float = (value) => ({ kind: "float", value });
+
+async function openControls(page, { rejectControls = false } = {}) {
+  const zone = (id, name, role, layers = []) => ({
+    id, name, role, enabled: true, brightness: 1,
+    members: [], layout: { placements: [] }, layers,
+  });
+  const scene = {
+    id: "33333333-3333-4333-8333-333333333333",
+    name: "Layer controls fixture", kind: "named", is_default: false, revision: 42,
+    zones: [
+      zone("11111111-1111-4111-8111-111111111111", "Primary lights", "primary", [{
+        id: "77777777-7777-4777-8777-777777777777", name: "Primary effect layer",
+        source: { type: "effect", effect_id: "88888888-8888-4888-8888-888888888888", controls: {} },
+      }]),
+      zone(ZONE, "Control lights", "custom", [{
+        id: LAYER, name: "Fixture layer", opacity: 1, blend: "replace",
+        source: { type: "effect", effect_id: EFFECT, controls: {
+          upper: float(0.2), lower: float(0.4),
+        } },
+      }]),
+    ],
+  };
+  let socket;
+  const reads = [];
+  const writes = [];
+  const unexpectedWrites = [];
+  const envelope = (data) => ({ data, meta: {
+    api_version: "v1", request_id: "req_controls_fixture", timestamp: "2026-09-09T00:00:00Z",
+  } });
+  const sendEvent = (event, data) => socket.send(JSON.stringify({ type: "event", event, data }));
+  const controlEvent = (controlId, value, oldValue = 0.4) => sendEvent("effect_control_changed", {
+    effect_id: scene.zones[1].layers[0].source.effect_id,
+    zone_id: ZONE, layer_id: scene.zones[1].layers[0].id,
+    control_id: controlId, old_value: float(oldValue), new_value: float(value), trigger: "api",
+  });
+  await page.setViewportSize({ width: 1440, height: 800 });
+  await page.routeWebSocket(/\/api\/v1\/ws(?:\?|$)/, (route) => { socket = route; });
+  await page.route("**/api/v1/**", async (route) => {
+    const request = route.request();
+    const pathname = new URL(request.url()).pathname;
+    if (["GET", "HEAD"].includes(request.method())) {
+      reads.push(pathname);
+      if (pathname === "/api/v1/scene") {
+        await route.fulfill({ json: envelope(scene) });
+        return;
+      }
+      if (pathname.startsWith("/api/v1/effects/") && !pathname.endsWith("/active")) {
+        const id = pathname.split("/").at(-1);
+        await route.fulfill({ json: envelope({
+          id, name: "Fixture effect", description: "Scrollable effect controls", author: "Hypercolor tests",
+          category: "ambient", source: "native", runnable: true, tags: [], version: "1.0.0",
+          audio_reactive: false,
+          controls: ["upper", ...Array.from({ length: 18 }, (_, i) => `middle${i}`), "lower"]
+            .map((id) => ({ id, name: `Fixture ${id}`, control_type: "slider",
+              default_value: float(0.2), min: 0, max: 1, step: 0.01 })),
+        }) });
+        return;
+      }
+      await route.continue();
+      return;
+    }
+    const layerPath = `/api/v1/scene/zones/${ZONE}/layers/${scene.zones[1].layers[0].id}`;
+    const body = request.postDataJSON();
+    writes.push({ method: request.method(), pathname, body, revision: request.headers()["if-match"] });
+    if (request.method() === "PATCH" && pathname === `${layerPath}/controls`) {
+      if (rejectControls) {
+        await route.fulfill({ status: 400, json: { error: { code: "invalid_control", message: "Fixture rejects this value" } } });
+        return;
+      }
+      Object.assign(scene.zones[1].layers[0].source.controls, body.values);
+      scene.revision += 1;
+      await route.fulfill({ json: envelope(scene.zones[1]) });
+      sendEvent("zone_changed", { scene_id: scene.id, zone_id: ZONE, role: "custom", kind: "controls_patched" });
+      for (const [id, value] of Object.entries(body.values)) controlEvent(id, value.value);
+      return;
+    }
+    if (request.method() === "PUT" && pathname === layerPath) {
+      if (request.headers()["if-match"] !== String(scene.revision)) {
+        await route.fulfill({ status: 412, json: { error: { code: "stale_revision", message: "Stale revision" } } });
+        return;
+      }
+      scene.revision += 1;
+      scene.zones[1].layers[0] = { ...body, id: replacementId(scene.revision) };
+      await route.fulfill({ json: envelope(scene.zones[1]) });
+      sendEvent("zone_changed", { scene_id: scene.id, zone_id: ZONE, role: "custom", kind: "updated" });
+      return;
+    }
+    unexpectedWrites.push(`${request.method()} ${pathname}`);
+    await route.abort("blockedbyclient");
+  });
+  await page.goto(`${getStack().appOrigin}/studio`, { waitUntil: "networkidle" });
+  await expect.poll(() => Boolean(socket)).toBe(true);
+  await page.getByTitle("Open the composition panel", { exact: true }).click();
+  await page.getByRole("button", { name: "Control lights 0 devices", exact: true }).click();
+  const inspector = page.getByRole("complementary");
+  const control = (name) => inspector.locator(`div:has(> label:text-is("Fixture ${name}")) > input[type="range"]`);
+  await expect(control("lower")).toHaveValue("0.4");
+  await page.waitForLoadState("networkidle");
+  return { scene, inspector, control, reads, writes, unexpectedWrites, controlEvent, sendEvent };
+}
+
+async function settle(page) {
+  await page.waitForLoadState("networkidle");
+  await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))));
+}
+
+async function scrollState(input) {
+  return input.evaluate((element) => {
+    const scrollers = [];
+    for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+      if (parent.scrollHeight > parent.clientHeight && /auto|scroll/.test(getComputedStyle(parent).overflowY)) {
+        scrollers.push(parent.scrollTop);
+      }
+    }
+    return scrollers;
+  });
+}
+
+test("Studio control edits and remote snapshots preserve the scrolled, focused widget", async ({ page }) => {
+  const fixture = await openControls(page);
+  const lower = fixture.control("lower");
+  await lower.scrollIntoViewIfNeeded();
+  await lower.focus();
+  const original = await lower.elementHandle();
+  const beforeScroll = await scrollState(lower);
+  expect(beforeScroll.some((offset) => offset > 100)).toBe(true);
+  const beforeReads = fixture.reads.length;
+  await lower.press("ArrowRight");
+  await expect.poll(() => fixture.writes.length).toBe(1);
+  await settle(page);
+  expect(fixture.writes[0].body.values.lower.value).toBeCloseTo(0.41, 6);
+  expect(await original.evaluate((element) => element.isConnected && document.activeElement === element)).toBe(true);
+  expect(await scrollState(lower)).toEqual(beforeScroll);
+  const editReads = fixture.reads.slice(beforeReads);
+  expect(editReads.filter((path) => path.startsWith("/api/v1/effects/"))).toEqual([]);
+  expect(editReads.filter((path) => path === "/api/v1/scene").length).toBeLessThanOrEqual(1);
+
+  // Another client changes the control while this inspector stays selected.
+  fixture.scene.zones[1].layers[0].source.controls.lower = float(0.73);
+  fixture.scene.revision += 1;
+  fixture.sendEvent("zone_changed", { scene_id: fixture.scene.id, zone_id: ZONE, role: "custom", kind: "controls_patched" });
+  fixture.controlEvent("lower", 0.73, 0.41);
+  await expect(lower).toHaveValue("0.73");
+  await settle(page);
+  expect(await original.evaluate((element) => element.isConnected && document.activeElement === element)).toBe(true);
+  expect(await scrollState(lower)).toEqual(beforeScroll);
+  expect(fixture.unexpectedWrites).toEqual([]);
+});
+
+test("Studio layer edits retain current controls and use each replacement's revision and identity", async ({ page }) => {
+  const fixture = await openControls(page);
+  // A refreshed snapshot changes both control data and revision before a
+  // compositing edit. The subsequent PUT must preserve those remote values.
+  fixture.scene.zones[1].layers[0].source.controls.lower = float(0.81);
+  fixture.scene.revision = 47;
+  fixture.sendEvent("zone_changed", { scene_id: fixture.scene.id, zone_id: ZONE, role: "custom", kind: "controls_patched" });
+  fixture.controlEvent("lower", 0.81);
+  await expect(fixture.control("lower")).toHaveValue("0.81");
+  await fixture.control("lower").scrollIntoViewIfNeeded();
+  const beforeScroll = await scrollState(fixture.control("lower"));
+  expect(beforeScroll.some((offset) => offset > 100)).toBe(true);
+  const opacity = fixture.inspector.locator("article input[type=range]").first();
+  await opacity.evaluate((element) => {
+    element.value = "0.5";
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+  await expect.poll(() => fixture.writes.length).toBe(1);
+  await settle(page);
+  expect(fixture.writes[0].revision).toBe("47");
+  expect(fixture.writes[0].body.source.controls.lower.value).toBeCloseTo(0.81, 6);
+  await expect(opacity).toHaveValue("0.5");
+  expect(await scrollState(fixture.control("lower"))).toEqual(beforeScroll);
+  const blend = fixture.inspector.locator("article").getByRole("button", { name: "Replace", exact: true });
+  await blend.scrollIntoViewIfNeeded();
+  await settle(page);
+  await blend.click();
+  await page.getByRole("option", { name: "Add", exact: true }).click();
+  await expect.poll(() => fixture.writes.length).toBe(2);
+  await settle(page);
+  expect(fixture.writes[1].revision).toBe("48");
+  expect(fixture.writes[1].pathname).toContain(replacementId(48));
+  expect(fixture.writes[1].body.opacity).toBe(0.5);
+  expect(fixture.writes[1].body.source.controls.lower.value).toBeCloseTo(0.81, 6);
+  await expect(fixture.inspector.locator("article").getByRole("button", { name: "Add", exact: true })).toBeVisible();
+  expect(fixture.unexpectedWrites).toEqual([]);
+});
+
+test("Studio source replacement retargets effect controls to the new layer", async ({ page }) => {
+  const fixture = await openControls(page);
+  const oldControl = await fixture.control("lower").elementHandle();
+  const nextEffect = "66666666-6666-4666-8666-666666666666";
+  fixture.scene.revision += 1;
+  fixture.scene.zones[1].layers[0] = {
+    ...fixture.scene.zones[1].layers[0],
+    id: replacementId(fixture.scene.revision),
+    source: { type: "effect", effect_id: nextEffect, controls: { lower: float(0.6) } },
+  };
+  fixture.sendEvent("zone_changed", {
+    scene_id: fixture.scene.id, zone_id: ZONE, role: "custom", kind: "updated",
+  });
+  await expect(fixture.control("lower")).toHaveValue("0.6");
+  expect(await oldControl.evaluate((element) => element.isConnected)).toBe(false);
+  expect(fixture.reads).toContain(`/api/v1/effects/${nextEffect}`);
+  await fixture.control("lower").focus();
+  await fixture.control("lower").press("ArrowRight");
+  await expect.poll(() => fixture.writes.length).toBe(1);
+  expect(fixture.writes[0].pathname).toBe(`/api/v1/scene/zones/${ZONE}/layers/${replacementId(43)}/controls`);
+  expect(fixture.writes[0].body.values.lower.value).toBeCloseTo(0.61, 6);
+  expect(fixture.unexpectedWrites).toEqual([]);
+});
+
+test("Studio rejected control edits restore the canonical value without remounting", async ({ page }) => {
+  const fixture = await openControls(page, { rejectControls: true });
+  const lower = fixture.control("lower");
+  await lower.scrollIntoViewIfNeeded();
+  await lower.focus();
+  const original = await lower.elementHandle();
+  const beforeScroll = await scrollState(lower);
+  await lower.press("ArrowRight");
+  await expect.poll(() => fixture.writes.length).toBe(1);
+  await expect(lower).toHaveValue("0.4");
+  await settle(page);
+  expect(fixture.scene.zones[1].layers[0].source.controls.lower).toEqual(float(0.4));
+  expect(await original.evaluate((element) => element.isConnected && document.activeElement === element)).toBe(true);
+  expect(await scrollState(lower)).toEqual(beforeScroll);
+  expect(fixture.unexpectedWrites).toEqual([]);
+});
+
+test("Studio advanced layer edits keep the disclosure open and preserve scrolling", async ({ page }) => {
+  const fixture = await openControls(page);
+  const disclosure = fixture.inspector.locator("article details");
+  await disclosure.locator("summary").click();
+  const scaleY = disclosure.locator('label:has(> span:text-is("Scale Y")) > input[type="range"]');
+  await scaleY.scrollIntoViewIfNeeded();
+  await expect.poll(async () => Number(await scaleY.inputValue())).toBe(1);
+  const beforeScroll = await scrollState(scaleY);
+  expect(beforeScroll.some((offset) => offset > 100)).toBe(true);
+  const beforeReads = fixture.reads.length;
+  await scaleY.evaluate((element) => {
+    element.value = "1.5";
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+  await expect.poll(() => fixture.writes.length).toBe(1);
+  await settle(page);
+  expect(fixture.writes[0].revision).toBe("42");
+  expect(fixture.writes[0].body.transform.scale).toEqual([1, 1.5]);
+  expect(fixture.scene.zones[1].layers[0].id).toBe(replacementId(43));
+  await expect(disclosure).toHaveAttribute("open", "");
+  await expect.poll(async () => Number(await scaleY.inputValue())).toBe(1.5);
+  expect(await scrollState(scaleY)).toEqual(beforeScroll);
+  expect(fixture.reads.slice(beforeReads).filter((path) => path === `/api/v1/effects/${EFFECT}`)).toEqual([]);
+  expect(fixture.unexpectedWrites).toEqual([]);
+});