@perspective-dev/viewer 5.5.1 → 5.6.0

package/src/rust/components/dragdrop_list.rs

@@ -24,7 +24,7 @@ use crate::components::column_selector::{EmptyColumn, InPlaceColumn, InvalidColu
 use crate::components::type_icon::TypeIcon;
 use crate::presentation::{DragDropContainer, Presentation};
 use crate::ui::intl_slug;
-use crate::utils::DragTarget;
+use crate::utils::{DragTarget, left_click};
 
 #[derive(Properties, Derivative)]
 #[derivative(Clone(bound = ""))]
@@ -161,8 +161,6 @@ where
                 if freeze && self.frozen_size.is_none() {
                     let elem = self.elem.cast::<HtmlElement>().unwrap();
                     self.frozen_size = Some({
-                        // `offset_width` and family are `i32`, but Chrome _really_
-                        // uses fractional pixel widths for these which can only be
                         // recovered by parsing the generated stylesheet ...
                         let txt = window()
                             .unwrap()
@@ -178,7 +176,8 @@ where
                     });
                     true
                 } else if !freeze {
-                    // Don't render because the invoker will do so through `dragdrop`.
+                    // Don't render because the invoker will do so through
+                    // `dragdrop`.
                     self.frozen_size = None;
                     false
                 } else {
@@ -191,8 +190,8 @@ where
     fn view(&self, ctx: &Context<Self>) -> Html {
         let dragover = Callback::from(|_event: DragEvent| _event.prevent_default());
 
-        // On dragleave, signal the parent but no need to redraw as parent will call
-        // `change()` when resetting props.
+        // On dragleave, signal the parent but no need to redraw as parent will
+        // call `change()` when resetting props.
         let drag_container = DragDropContainer::new(
             {
                 let total = ctx.props().children.len();
@@ -244,7 +243,7 @@ where
                 .map(|x| V::is_self_move(x))
                 .unwrap_or_default();
 
-            let close = ctx.props().parent.callback(|_| V::close(0));
+            let close = left_click(ctx.props().parent.callback(|_| V::close(0)));
             let dragenter = ctx.props().parent.callback({
                 let container_noderef = container_noderef.clone();
                 move |event: DragEvent| {
@@ -332,7 +331,7 @@ where
                 .into_iter()
                 .enumerate()
                 .map(|(idx, column)| {
-                    let close = ctx.props().parent.callback(move |_| V::close(idx));
+                    let close = left_click(ctx.props().parent.callback(move |_| V::close(idx)));
                     let dragenter = ctx.props().parent.callback({
                         let link = ctx.link().clone();
                         let container_noderef = container_noderef.clone();
@@ -441,7 +440,7 @@ where
                                     </div>
                                     <span
                                         class="toggle-mode is_column_active"
-                                        onmousedown={ctx.props().parent.callback(move |_| V::close(0))}
+                                        onmousedown={left_click(ctx.props().parent.callback(move |_| V::close(0)))}
                                     />
                                 </div>
                             } else if show_empty {

package/src/rust/components/main_panel/msg.rs

@@ -49,12 +49,14 @@ pub enum MainPanelMsg {
     BeforeResize(web_sys::Event),
 
     /// A right-click opened the panel context menu (target panel id, client
-    /// x, y). Fired by the imperative `contextmenu` listener on the panel
-    /// container — see `_contextmenu_listener` — and by each `PanelTab`.
+    /// x, y). Fired by the imperative `contextmenu` listener on the viewer
+    /// host — see `_contextmenu_listener` — and by each `PanelTab`.
     /// `Some(id)` activates that panel and opens its
     /// [`PanelMenu`](crate::components::panel_menu::PanelMenu) at the
-    /// cursor; `None` is the EMPTY stage (zero panels) — a target-less menu
-    /// offering only "New", whose items create the first panel.
+    /// cursor; `None` (no frame on the composed path — status bar,
+    /// sidebars, the empty stage) resolves to the ACTIVE panel, else to a
+    /// target-less menu offering only "New", whose items create the first
+    /// panel.
     ContextMenu(Option<String>, f64, f64),
 
     /// Dismiss the panel context menu (the menu session ended).

package/src/rust/components/main_panel/reconcile.rs

@@ -111,6 +111,8 @@ impl MainPanel {
         if self.listener_target.as_ref() != Some(&el) {
             if self.listener_target.is_some() {
                 self.inserted.clear();
+                self.pending_insertions.clear();
+                self.suspect_closes.clear();
             }
 
             let _ = el.add_event_listener_with_callback(
@@ -183,11 +185,13 @@ impl MainPanel {
             // horizontal) rather than the default (path `[]`), which would
             // *stack* into the root tab-layout — a stack only renders its
             // selected tab, and without frame chrome there's no tab-bar to
-            // reach the others. Splitting keeps every panel visible side-by-side.
+            // reach the others. Splitting keeps every panel visible
+            // side-by-side.
             let index = self.inserted.len();
             let path = JsValue::from(js_sys::Array::of1(&JsValue::from_f64(index as f64)));
             let _ = layout.insert_panel(name, path, JsValue::from_bool(true));
             self.inserted.push(name.to_owned());
+            self.pending_insertions.insert(name.to_owned());
         }
 
         let mut pending = std::mem::take(&mut self.pending_removals);
@@ -197,6 +201,7 @@ impl MainPanel {
             }
 
             if pending.insert(name.clone()) {
+                self.pending_insertions.remove(name);
                 let _ = layout.remove_panel(name);
             }
 

package/src/rust/components/main_panel/render.rs

@@ -58,19 +58,21 @@ impl MainPanel {
         let on_dismiss_warning = dismiss_render_warning_callback(session, renderer);
 
         // Each panel's plugin is mounted in the viewer's light DOM under its
-        // panel-id slot (see `renderer::activate`). Render one `<regular-layout>`
-        // cell per panel: a concrete `<div name=…>` wrapper (which
-        // `regular-layout` grid-places via its `::slotted([name])` rule — that
-        // only matches *direct*, non-`<slot>` children, hence the wrapper) whose
-        // inner forwarding `<slot>` projects the light-DOM plugin into the placed
-        // cell. The `<regular-layout>` element is ALWAYS rendered — at zero
-        // panels it is merely empty (its tree collapses to a childless split,
-        // and it paints nothing of its own), which keeps the stage CSS
-        // (viewer.css keys the stage background + inset bleed on the element)
-        // and the attached listeners alive across empty↔populated transitions.
+        // panel-id slot (see `renderer::activate`). Render one
+        // `<regular-layout>` cell per panel: a concrete `<div name=…>`
+        // wrapper (which `regular-layout` grid-places via its
+        // `::slotted([name])` rule — that only matches *direct*,
+        // non-`<slot>` children, hence the wrapper) whose
+        // inner forwarding `<slot>` projects the light-DOM plugin into the
+        // placed cell. The `<regular-layout>` element is ALWAYS
+        // rendered — at zero panels it is merely empty (its tree
+        // collapses to a childless split, and it paints nothing of its
+        // own), which keeps the stage CSS (viewer.css keys the stage
+        // background + inset bleed on the element) and the attached
+        // listeners alive across empty↔populated transitions.
         let plugin_area = {
-            // The active panel (whose engines the status bar/settings target) is
-            // the one the active renderer is bound to.
+            // The active panel (whose engines the status bar/settings target)
+            // is the one the active renderer is bound to.
             let active_slot = renderer.slot_name();
             // Panel-count chrome (`single`/`multi`, closable, draggable)
             let placed_count = ctx.props().workspace.placed_count();
@@ -99,20 +101,25 @@ impl MainPanel {
                             class.push("active");
                         }
                     } else {
-                        // Lone panel: can't be closed to zero — hide the close button
-                        // (see viewer.css) and skip the active outline.
+                        // Lone panel: can't be closed to zero — hide the close
+                        // button (see viewer.css) and
+                        // skip the active outline.
                         class.push("single");
                     }
 
-                    // Activate this panel on pointerdown anywhere in it (body or
-                    // titlebar), so *working* in a panel — not only clicking its tab
-                    // — targets it with the shared settings/toolbar. regular-layout
-                    // emits `regular-layout-select` on tab clicks only, which left
-                    // body interaction unable to change the active panel. Tab clicks
-                    // still also fire `-select`, but that dispatch is async (after
-                    // `restore`) so it lands after this synchronous handler — within a
-                    // stack, switching tabs still resolves to the clicked panel.
-                    // Re-activating the already-active panel is a no-op upstream.
+                    // Activate this panel on pointerdown anywhere in it (body
+                    // or titlebar), so *working* in a panel
+                    // — not only clicking its tab — targets
+                    // it with the shared settings/toolbar. regular-layout
+                    // emits `regular-layout-select` on tab clicks only, which
+                    // left body interaction unable to
+                    // change the active panel. Tab clicks
+                    // still also fire `-select`, but that dispatch is async
+                    // (after `restore`) so it lands after
+                    // this synchronous handler — within a
+                    // stack, switching tabs still resolves to the clicked
+                    // panel. Re-activating the
+                    // already-active panel is a no-op upstream.
                     let on_activate = ctx.props().on_activate_panel.clone();
                     let activate_name = name.clone();
                     let onpointerdown = Callback::from(move |_: web_sys::PointerEvent| {
@@ -121,25 +128,33 @@ impl MainPanel {
                         }
                     });
 
-                    // Right-click anywhere in the panel opens the context menu. This
-                    // is handled by the imperative `contextmenu` listener on the
+                    // Right-click anywhere in the panel opens the context menu.
+                    // This is handled by the imperative
+                    // `contextmenu` listener on the
                     // panel container (see `_contextmenu_listener`), NOT a Yew
-                    // `oncontextmenu` here: the plugin body is light-DOM attached by
-                    // the renderer, so Yew's delegated handler — which walks the vdom
-                    // — never matches a right-click on it, leaving the native menu.
+                    // `oncontextmenu` here: the plugin body is light-DOM
+                    // attached by the renderer, so Yew's
+                    // delegated handler — which walks the vdom
+                    // — never matches a right-click on it, leaving the native
+                    // menu.
 
                     // `<regular-layout-frame>` gives each panel a titlebar (its
-                    // `slot="tab"`) and a `::part(container)`. Two forwarding `<slot>`s
-                    // project our light-DOM nodes in: `name` → the plugin (into the
-                    // container), and `tab-<name>` (with `slot="tab"`) → this panel's
-                    // `<PanelTab>` (into the titlebar). Both targets live in the
-                    // viewer's light DOM, so the slots — being in the viewer's shadow —
-                    // collect them and forward them one level deeper into the frame.
+                    // `slot="tab"`) and a `::part(container)`. Two forwarding
+                    // `<slot>`s project our light-DOM nodes
+                    // in: `name` → the plugin (into the
+                    // container), and `tab-<name>` (with `slot="tab"`) → this
+                    // panel's `<PanelTab>` (into the
+                    // titlebar). Both targets live in the
+                    // viewer's light DOM, so the slots — being in the viewer's
+                    // shadow — collect them and forward
+                    // them one level deeper into the frame.
                     //
-                    // The frame no longer carries the theme: the per-panel theme is
-                    // applied directly to the light-DOM plugin + tab (each stamped with
-                    // a `theme` attribute) via the `perspective-viewer [theme="X"]`
-                    // document rules, so it themes through the native cascade instead
+                    // The frame no longer carries the theme: the per-panel
+                    // theme is applied directly to the
+                    // light-DOM plugin + tab (each stamped with
+                    // a `theme` attribute) via the `perspective-viewer
+                    // [theme="X"]` document rules, so it
+                    // themes through the native cascade instead
                     // of a scraped/inlined `--psp-*` block.
                     html! {
                         <regular-layout-frame
@@ -154,10 +169,11 @@ impl MainPanel {
                     }
                 });
 
-            // Per-panel tab titles: regular-layout's tabs render their label from
-            // a `--regular-layout-<id>--title` custom property (a CSS string). We
-            // set one per titled panel on the `<regular-layout>` host; they
-            // inherit into each frame/tab's shadow.
+            // Per-panel tab titles: regular-layout's tabs render their label
+            // from a `--regular-layout-<id>--title` custom property
+            // (a CSS string). We set one per titled panel on the
+            // `<regular-layout>` host; they inherit into each
+            // frame/tab's shadow.
             let title_style = ctx
                 .props()
                 .panel_titles
@@ -171,10 +187,11 @@ impl MainPanel {
 
             // One `<PanelTab>` per panel, mounted in the viewer's light DOM and
             // forwarded into its frame's titlebar by the `tab-<id>` slot above.
-            // Rendered as siblings of `<regular-layout>` (their DOM placement is
-            // irrelevant — each portals itself onto the viewer host). `on_select`
-            // drives regular-layout's own `select` (the `regular-layout-select`
-            // listener picks up activation).
+            // Rendered as siblings of `<regular-layout>` (their DOM placement
+            // is irrelevant — each portals itself onto the viewer
+            // host). `on_select` drives regular-layout's own
+            // `select` (the `regular-layout-select` listener picks
+            // up activation).
             let viewer_elem = ctx.props().presentation.viewer_elem().clone();
             // A lone panel can't be closed to zero, and has nowhere to be
             // dragged — so it's neither closable nor draggable; its tab also
@@ -199,12 +216,13 @@ impl MainPanel {
             // `regular-layout` on the re-render. Driving the layout first — and
             // discovering the close via the `regular-layout-update` DOM event —
             // ran the layout-update resize fan-out over a still-present-but-
-            // doomed panel, spawning an (uncancellable) draw that then raced its
-            // disposal ("restore() called before load()").
+            // doomed panel, spawning an (uncancellable) draw that then raced
+            // its disposal ("restore() called before load()").
             let on_close = ctx.props().on_close_panel.clone();
-            // Commit an in-tab title edit to that panel's own session — the same
-            // `title_changed` → `TitlesChanged` refresh loop that used to be
-            // driven by the status bar re-renders the tab with the new title.
+            // Commit an in-tab title edit to that panel's own session — the
+            // same `title_changed` → `TitlesChanged` refresh loop
+            // that used to be driven by the status bar re-renders
+            // the tab with the new title.
             let on_rename = {
                 let workspace = ctx.props().workspace.clone();
                 Callback::from(move |(id, title): (String, Option<String>)| {
@@ -406,6 +424,7 @@ impl MainPanel {
                     on_reset={ctx.props().on_reset.clone()}
                     {on_new_panel}
                     session_props={ctx.props().session_props.clone()}
+                    render_error={ctx.props().renderer_props.render_error.clone()}
                     presentation_props={ctx.props().presentation_props.clone()}
                     is_settings_open={ctx.props().is_settings_open}
                     update_count={ctx.props().update_count}

package/src/rust/components/main_panel/update.rs

@@ -19,7 +19,8 @@ use perspective_js::utils::JsValueSerdeExt;
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
-use super::MainPanel;
+use super::{MainPanel, MainPanelMsg};
+use crate::ApiFuture;
 use crate::components::panel_menu::PanelCommand;
 use crate::js::{Layout, RegularLayout};
 use crate::renderer::SUBPIXEL_EPSILON;
@@ -58,15 +59,40 @@ impl MainPanel {
 
         let layout: RegularLayout = el.unchecked_into();
         let mut closed = Vec::new();
+        let mut pending_insertions = std::mem::take(&mut self.pending_insertions);
+        let mut suspect_closes = std::mem::take(&mut self.suspect_closes);
         self.inserted.retain(|id| {
             if layout.contains_panel(id) {
+                pending_insertions.remove(id);
+                suspect_closes.remove(id);
+                true
+            } else if pending_insertions.contains(id) {
+                // Issued to the layout but not yet in a committed tree —
+                // the pre-commit window, not a close.
+                true
+            } else if ctx.props().panel_ids.iter().any(|p| p.as_str() == id)
+                && suspect_closes.insert(id.clone())
+            {
                 true
             } else {
+                suspect_closes.remove(id);
                 closed.push(id.clone());
                 false
             }
         });
 
+        self.pending_insertions = pending_insertions;
+        let recheck = !suspect_closes.is_empty();
+        self.suspect_closes = suspect_closes;
+        if recheck {
+            let link = ctx.link().clone();
+            ApiFuture::spawn(async move {
+                crate::utils::request_animation_frame().await;
+                link.send_message(MainPanelMsg::LayoutUpdated);
+                Ok(())
+            });
+        }
+
         let closed_any = !closed.is_empty();
         for id in closed {
             self.pending_removals.remove(&id);
@@ -160,6 +186,18 @@ impl MainPanel {
         x: f64,
         y: f64,
     ) -> bool {
+        // A frame-less right-click (status bar, sidebars) targets the
+        // ACTIVE panel, validated against the workspace so a stale slot
+        // name after an eject falls back to the target-less stage menu.
+        let id = id.or_else(|| {
+            ctx.props().renderer.slot_name().filter(|name| {
+                ctx.props()
+                    .workspace
+                    .panel(&crate::workspace::PanelId::from(name.as_str()))
+                    .is_some()
+            })
+        });
+
         // Make the right-clicked panel active so active-targeting
         // commands (e.g. Reset) act on it; then show the menu.
         if let Some(id) = &id {

package/src/rust/components/main_panel.rs

@@ -185,14 +185,15 @@ pub struct MainPanel {
     /// and attached alongside the others.
     _layout_before_resize_listener: Closure<dyn FnMut(web_sys::Event)>,
 
-    /// `contextmenu` listener on the panel *container* — one stable attach
-    /// point covering the whole stage, independent of the layout reconcile;
-    /// at zero panels it opens the stage menu. Kept alive here and attached
-    /// once in `rendered`. Imperative — not a Yew `oncontextmenu` — because
-    /// the plugin body is light-DOM attached by the renderer (its DOM parent
-    /// is the host, not the frame), so Yew's delegated handler never matches
-    /// a right-click there. A native listener catches it via composed
-    /// bubbling and resolves the panel from the path.
+    /// `contextmenu` listener on the viewer HOST element — one stable attach
+    /// point covering every surface (panels, status bar, sidebars),
+    /// independent of the layout reconcile; attached once in `rendered` and
+    /// REMOVED in `destroy`, since the host outlives this component's Yew
+    /// app. Imperative — not a Yew `oncontextmenu` — because the plugin body
+    /// is light-DOM attached by the renderer (its DOM parent is the host,
+    /// not the frame), so Yew's delegated handler never matches a
+    /// right-click there; a native listener sees every surface — shadow
+    /// chrome and slotted light DOM alike — on the composed path.
     _contextmenu_listener: Closure<dyn FnMut(web_sys::Event)>,
 
     /// The `<regular-layout>` ELEMENT the layout listeners are attached to.
@@ -211,6 +212,20 @@ pub struct MainPanel {
     /// layout and not yet committed.
     pending_removals: HashSet<String>,
 
+    /// Ids whose `insertPanel` has been issued to the layout and not yet
+    /// observed in a committed tree: layout commits are async, so a
+    /// multi-insert reconcile sees `regular-layout-update` events BETWEEN
+    /// commits, and close detection must not mistake the pre-commit window
+    /// for a user close (it once disposed the second of two restored
+    /// panels mid-restore).
+    pending_insertions: HashSet<String>,
+
+    /// MODEL-held panels observed absent from exactly one committed tree,
+    /// awaiting the next `regular-layout-update` (rescheduled one frame out)
+    /// to confirm a layout-originated close — an unrelated removal's commit
+    /// can report a live sibling absent transiently.
+    suspect_closes: HashSet<String>,
+
     /// Per-panel `ResizeObserver`s, keyed by panel id, each observing that
     /// panel's slotted plugin element and resizing only that panel's
     /// `Renderer`. Bound in `BeforeResize` for the DRAGGED panel only (it is
@@ -226,9 +241,9 @@ pub struct MainPanel {
     hidden_tabs: HashSet<String>,
 
     /// Open context menu as `(client x, client y, target panel id)`; outer
-    /// `None` when closed. A `None` *panel id* is the empty-stage menu (zero
-    /// panels — "New" only). Rendered as a cursor-anchored
-    /// [`PanelMenu`](super::panel_menu::PanelMenu) overlay.
+    /// `None` when closed. A `None` *panel id* is the target-less menu (no
+    /// active panel to resolve to — "New" only). Rendered as a
+    /// cursor-anchored [`PanelMenu`](super::panel_menu::PanelMenu) overlay.
     context_menu: Option<(f64, f64, Option<String>)>,
 
     /// Id of the currently maximized panel (via `regular-layout.maximize`), or
@@ -280,27 +295,29 @@ impl Component for MainPanel {
         }) as Box<dyn FnMut(web_sys::Event)>);
 
         // `preventDefault()` synchronously suspends the layout's resize commit
-        // (the event is cancelable); the component then pre-sizes each panel and
-        // calls `resumeResize` to release it (see `MainPanelMsg::BeforeResize`).
+        // (the event is cancelable); the component then pre-sizes each panel
+        // and calls `resumeResize` to release it (see
+        // `MainPanelMsg::BeforeResize`).
         let before_resize_cb = ctx.link().callback(MainPanelMsg::BeforeResize);
         let before_resize_listener = Closure::wrap(Box::new(move |event: web_sys::Event| {
             event.prevent_default();
             before_resize_cb.emit(event);
         }) as Box<dyn FnMut(web_sys::Event)>);
 
-        // Imperative `contextmenu` listener: a right-click anywhere in a panel
-        // (the plugin body included) opens the panel menu. The plugin body is
-        // light-DOM attached by the renderer, so a Yew `oncontextmenu` on the
-        // frame never matches it (Yew walks the vdom, not the composed path).
-        // This native listener resolves the panel from the
-        // `<regular-layout-frame name=…>` on the event's composed path, then
-        // suppresses the browser menu and emits. On the EMPTY stage (zero
-        // panels — the persistent `<regular-layout>` has no frame
-        // descendants), it opens the stage menu instead, whose "New" items
-        // create the first panel.
+        // Imperative `contextmenu` listener: a right-click anywhere in the
+        // element opens the panel menu — targeting the frame on the event's
+        // composed path, or `None` (resolved to the ACTIVE panel, else the
+        // stage menu, in `on_context_menu`, where props live) from any
+        // other surface. Two pass-throughs keep the NATIVE menu: editable
+        // targets (inputs, textareas, contenteditable — cut/copy/paste),
+        // and anything inside an open `PortalModal` (every modal host is a
+        // light-DOM viewer child in the modal slot — this menu included, so
+        // without the carve-out a right-click in any open dropdown would
+        // re-open the menu underneath it).
         let contextmenu_cb = ctx
             .link()
             .callback(|(id, x, y)| MainPanelMsg::ContextMenu(id, x, y));
+        let viewer_elem = ctx.props().presentation.viewer_elem().clone();
         let contextmenu_listener = Closure::wrap(Box::new(move |event: web_sys::Event| {
             // Shift+right-click passes through to the native browser menu.
             if event.unchecked_ref::<web_sys::MouseEvent>().shift_key() {
@@ -308,11 +325,34 @@ impl Component for MainPanel {
             }
 
             let path = event.composed_path();
+            let is_editable = path.get(0).dyn_ref::<web_sys::HtmlElement>().is_some_and(
+                |el: &web_sys::HtmlElement| {
+                    el.tag_name().eq_ignore_ascii_case("input")
+                        || el.tag_name().eq_ignore_ascii_case("textarea")
+                        || el.is_content_editable()
+                },
+            );
+
+            if is_editable {
+                return;
+            }
+
             let mut panel_id = None;
             for i in 0..path.length() {
                 let node = path.get(i);
-                if let Some(el) = node.dyn_ref::<web_sys::Element>()
-                    && el.tag_name().eq_ignore_ascii_case("regular-layout-frame")
+                let Some(el) = node.dyn_ref::<web_sys::Element>() else {
+                    continue;
+                };
+
+                if el == viewer_elem.unchecked_ref::<web_sys::Element>() {
+                    break;
+                }
+
+                if el.slot() == crate::ui::MODAL_SLOT {
+                    return;
+                }
+
+                if el.tag_name().eq_ignore_ascii_case("regular-layout-frame")
                     && let Some(name) = el.get_attribute("name")
                 {
                     panel_id = Some(name);
@@ -320,29 +360,9 @@ impl Component for MainPanel {
                 }
             }
 
-            let is_empty_stage = || {
-                event
-                    .current_target()
-                    .and_then(|t| t.dyn_into::<web_sys::Element>().ok())
-                    .is_some_and(|el| {
-                        el.query_selector("regular-layout-frame")
-                            .ok()
-                            .flatten()
-                            .is_none()
-                    })
-            };
-
-            if let Some(id) = panel_id {
-                event.prevent_default();
-                let mouse = event.unchecked_ref::<web_sys::MouseEvent>();
-                contextmenu_cb.emit((Some(id), mouse.client_x() as f64, mouse.client_y() as f64));
-            } else if is_empty_stage() {
-                event.prevent_default();
-                let mouse = event.unchecked_ref::<web_sys::MouseEvent>();
-                contextmenu_cb.emit((None, mouse.client_x() as f64, mouse.client_y() as f64));
-            }
-            // With panels present, a click outside every frame lets the
-            // native menu through.
+            event.prevent_default();
+            let mouse = event.unchecked_ref::<web_sys::MouseEvent>();
+            contextmenu_cb.emit((panel_id, mouse.client_x() as f64, mouse.client_y() as f64));
         }) as Box<dyn FnMut(web_sys::Event)>);
 
         let staged_sub = {
@@ -368,6 +388,8 @@ impl Component for MainPanel {
             layout_ref: NodeRef::default(),
             inserted: Vec::new(),
             pending_removals: HashSet::new(),
+            pending_insertions: HashSet::new(),
+            suspect_closes: HashSet::new(),
             _layout_update_listener: listener,
             _layout_select_listener: select_listener,
             _layout_before_resize_listener: before_resize_listener,
@@ -404,16 +426,20 @@ impl Component for MainPanel {
     }
 
     fn rendered(&mut self, ctx: &Context<Self>, first_render: bool) {
-        // The `contextmenu` listener attaches to the panel CONTAINER — one
-        // stable attach point covering the whole stage, decoupled from the
-        // layout reconcile. Panel right-clicks bubble to it through the
-        // layout on the composed path; at zero panels it serves the stage
-        // menu.
-        if first_render && let Some(el) = self.main_panel_ref.cast::<web_sys::HtmlElement>() {
-            let _ = el.add_event_listener_with_callback(
-                "contextmenu",
-                self._contextmenu_listener.as_ref().unchecked_ref(),
-            );
+        // The `contextmenu` listener attaches to the viewer HOST element —
+        // one stable attach point covering every surface (panels, status
+        // bar, sidebars), decoupled from the layout reconcile. Panel
+        // right-clicks reach it through their frames on the composed path;
+        // everything else resolves to the active panel (or the stage menu).
+        if first_render {
+            let _ = ctx
+                .props()
+                .presentation
+                .viewer_elem()
+                .add_event_listener_with_callback(
+                    "contextmenu",
+                    self._contextmenu_listener.as_ref().unchecked_ref(),
+                );
         }
 
         self.size_staging_wrappers();
@@ -425,7 +451,19 @@ impl Component for MainPanel {
         self.render(ctx)
     }
 
-    fn destroy(&mut self, _ctx: &Context<Self>) {}
+    fn destroy(&mut self, ctx: &Context<Self>) {
+        // The host element outlives this component (`delete()` tears down
+        // the Yew app, not the custom element), so the listener must not
+        // dangle into a dropped `Closure`.
+        let _ = ctx
+            .props()
+            .presentation
+            .viewer_elem()
+            .remove_event_listener_with_callback(
+                "contextmenu",
+                self._contextmenu_listener.as_ref().unchecked_ref(),
+            );
+    }
 }
 
 impl MainPanel {