@perspective-dev/viewer 4.5.2 → 5.1.0

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

@@ -0,0 +1,224 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! `MainPanel::rendered` reconcile: attach the layout listeners once, apply a
+//! `restore`-staged layout tree, and `insertPanel`/`removePanel` cells
+//! against `panel_ids`. Purely STRUCTURAL — it never touches plugin
+//! rendering or paint-affecting plugin attributes (those belong to locked
+//! draw dispatches; see the note at the end of `reconcile`).
+
+use perspective_js::utils::JsValueSerdeExt;
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+
+use super::MainPanel;
+use crate::js::RegularLayout;
+
+/// Layout interaction tuning constants, applied via
+/// [`RegularLayout::restore_physics`] when the layout element mounts.
+#[derive(serde::Serialize)]
+#[serde(rename_all = "SCREAMING_SNAKE_CASE")]
+struct LayoutPhysics {
+    grid_divider_size: f64,
+    split_edge_tolerance: f64,
+    split_root_edge_tolerance: f64,
+}
+
+const LAYOUT_PHYSICS: LayoutPhysics = LayoutPhysics {
+    grid_divider_size: 6.0,
+    split_edge_tolerance: 0.33,
+    split_root_edge_tolerance: 0.1,
+};
+
+impl MainPanel {
+    /// Size each STAGED panel's hidden wrapper (`.psp-staging` — see
+    /// `MainPanel::render` and `Workspace::stage_panel`) to its PREDICTED
+    /// post-insert cell: an equal share of the layout box's width (the
+    /// reconcile insert splits the root horizontally with equal
+    /// redistribution) minus the frame-chrome fallback the presize sweep
+    /// uses. Prediction only — the staged first draw renders at these
+    /// dimensions, and any delta from the real committed cell is
+    /// reconciled by the post-commit reactive resize (free when exact,
+    /// via the charts transport's dims-unchanged guard). Imperative
+    /// because it MEASURES the committed layout box, which a `view()`
+    /// style prop cannot.
+    pub(super) fn size_staging_wrappers(&self) {
+        let Some(root) = self.main_panel_ref.cast::<web_sys::Element>() else {
+            return;
+        };
+
+        let Ok(wrappers) = root.query_selector_all(".psp-staging") else {
+            return;
+        };
+
+        if wrappers.length() == 0 {
+            return;
+        }
+
+        let Some(layout) = self.layout_ref.cast::<web_sys::HtmlElement>() else {
+            return;
+        };
+
+        let stage = layout.get_bounding_client_rect();
+        let shares = (self.inserted.len() + wrappers.length() as usize).max(1) as f64;
+        let (chrome_w, chrome_h) = crate::tasks::CHROME_FALLBACK;
+        let width = (stage.width() / shares - chrome_w).max(0.0);
+        let height = (stage.height() - chrome_h).max(0.0);
+        for i in 0..wrappers.length() {
+            if let Some(node) = wrappers.get(i)
+                && let Some(el) = node.dyn_ref::<web_sys::HtmlElement>()
+            {
+                let _ = el.style().set_property("width", &format!("{width}px"));
+                let _ = el.style().set_property("height", &format!("{height}px"));
+            }
+        }
+    }
+
+    /// Reconcile the `<regular-layout>` grid against `panel_ids`: `insertPanel`
+    /// newly-rendered cells (flipping each from `display:none` to a visible
+    /// grid cell) and `removePanel` cells whose panels are gone.
+    pub(super) fn reconcile(&mut self, ctx: &Context<Self>) {
+        // The `<regular-layout>` element is rendered unconditionally and so is
+        // stable for this component's lifetime — zero panels is just another
+        // count (empty insert loop; the retain below removes the last cell,
+        // collapsing the layout tree to a childless split). Do NOT reset
+        // `listener_target`/`inserted` on empty: the listeners stay attached
+        // to the persistent element.
+        let Some(el) = self.layout_ref.cast::<web_sys::HtmlElement>() else {
+            return;
+        };
+
+        // Attach the close-detection + active-panel-sync listeners once per
+        // ELEMENT (the `<regular-layout>` element is keyed into a fully-keyed
+        // sibling list, so Yew reuses one instance for this MainPanel's
+        // lifetime), and configure resize physics — `GRID_DIVIDER_SIZE` is the
+        // divider hit tolerance (0 by default → not resizable). The cell-edge
+        // band it grabs must be left uncovered: each `.rl-panel` carries a
+        // `margin` (viewer.css) so pointerdowns there reach `regular-layout`
+        // instead of the frame. Comparing the ELEMENT (not a latched bool)
+        // self-heals an instance swap: a fresh element boots an EMPTY layout
+        // tree with no listeners, so everything must be re-bound and every
+        // placed panel re-inserted (see `listener_target`).
+        if self.listener_target.as_ref() != Some(&el) {
+            if self.listener_target.is_some() {
+                self.inserted.clear();
+            }
+
+            let _ = el.add_event_listener_with_callback(
+                RegularLayout::UPDATE_EVENT,
+                self._layout_update_listener.as_ref().unchecked_ref(),
+            );
+
+            let _ = el.add_event_listener_with_callback(
+                RegularLayout::SELECT_EVENT,
+                self._layout_select_listener.as_ref().unchecked_ref(),
+            );
+
+            let _ = el.add_event_listener_with_callback(
+                RegularLayout::BEFORE_RESIZE_EVENT,
+                self._layout_before_resize_listener.as_ref().unchecked_ref(),
+            );
+
+            if let Ok(physics) = JsValue::from_serde_ext(&LAYOUT_PHYSICS) {
+                el.unchecked_ref::<RegularLayout>()
+                    .restore_physics(&physics);
+            }
+
+            self.listener_target = Some(el.clone());
+        }
+
+        let layout: RegularLayout = el.unchecked_into();
+        let panel_ids = &ctx.props().panel_ids;
+
+        // Whole-element restore stages its saved layout tree on the Workspace
+        // (the model; regular-layout is a slave view). Apply it here, BEFORE
+        // the insert reconcile, and seed `inserted` from its panel names — so
+        // restored panels mount directly at their saved positions in ONE
+        // layout commit, never transiting the synthetic equal-split inserts
+        // below.
+        if let Some(tree) = ctx.props().workspace.take_pending_layout()
+            && let Ok(js) = JsValue::from_serde_ext(&tree)
+        {
+            layout.restore_sync(&js);
+            for name in tree.slot_names() {
+                if !self.inserted.contains(&name) {
+                    self.inserted.push(name);
+                }
+            }
+        }
+
+        // Insert cells that are newly present.
+        for id in panel_ids {
+            let name = id.as_str();
+            if self.inserted.iter().any(|n| n == name) {
+                continue;
+            }
+
+            // STAGED panels are withheld from the layout: their first draw
+            // is completing in the hidden staging wrapper (see
+            // `Workspace::stage_panel`). The promote re-render clears the
+            // flag, and this loop then inserts the already-drawn panel.
+            if ctx.props().workspace.is_staged(id) {
+                continue;
+            }
+
+            // Already placed in the layout tree (the layout is the placement
+            // source of truth — e.g. a restored tree naming a panel this
+            // component hasn't tracked yet): record it, never re-split it.
+            if layout.contains_panel(name) {
+                self.inserted.push(name.to_owned());
+                continue;
+            }
+
+            // Insert at this panel's index as a split (orientation = `true` →
+            // 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.
+            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());
+        }
+
+        // Remove cells whose panels are gone.
+        self.inserted.retain(|name| {
+            if panel_ids.iter().any(|id| id.as_str() == name) {
+                true
+            } else {
+                let _ = layout.remove_panel(name);
+                false
+            }
+        });
+
+        // A removed panel can't stay "maximized" (regular-layout drops the
+        // maximize stylesheet when its panel leaves the layout).
+        if let Some(m) = &self.maximized
+            && !panel_ids.iter().any(|id| id.as_str() == m.as_str())
+        {
+            self.maximized = None;
+        }
+
+        // NOTE: neither the plugin `theme` attribute nor the `active` class
+        // is managed here. This pass is an async render — mutating
+        // paint-affecting plugin state from it splits the change and the
+        // plugin DOM it styles across two paints (the datagrid's "wrong-row
+        // EDIT" artifact), and inferring "needs restyle" from DOM state here
+        // raced in-flight locked runs (it once captured a pre-rebuild `View`
+        // and restyled it after its deletion). Both stamps are applied by
+        // `Renderer::stamp_active`/`stamp_theme` INSIDE locked plugin
+        // dispatches, atomic with the draw ("stamp before draw"); theme
+        // CHANGES are restyled by their mutation sites (the theme-picker
+        // task, `restorePanel`, `resetThemes`, and the root's default-theme
+        // fan-out in `snapshots.rs::on_update_presentation`).
+    }
+}

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

@@ -0,0 +1,385 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! `MainPanel::view`: the shared status bar, the `<regular-layout>` cells (one
+//! forwarding `<slot>` wrapper per panel), the per-panel `<PanelTab>`s, and the
+//! cursor-anchored `<PanelMenu>`.
+
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+
+use super::{MainPanel, MainPanelMsg, MainPanelProps};
+use crate::components::panel_menu::PanelMenu;
+use crate::components::panel_tab::PanelTab;
+use crate::components::render_warning::RenderWarning;
+use crate::components::status_bar::StatusBar;
+use crate::js::RegularLayout;
+use crate::tasks::dismiss_render_warning_callback;
+use crate::workspace::PanelId;
+
+/// Format a string as a CSS string literal (double-quoted, with `\` and `"`
+/// escaped) — for use as a `--regular-layout-<id>--title` custom-property
+/// value.
+fn css_string(s: &str) -> String {
+    let escaped = s.replace('\\', "\\\\").replace('"', "\\\"");
+    format!("\"{escaped}\"")
+}
+
+impl MainPanel {
+    pub(super) fn render(&self, ctx: &Context<Self>) -> Html {
+        let MainPanelProps {
+            presentation,
+            renderer,
+            session,
+            ..
+        } = ctx.props();
+
+        let is_settings_open = ctx.props().is_settings_open;
+        let mut class = classes!();
+        if !is_settings_open {
+            class.push("settings-closed");
+        }
+
+        if ctx.props().is_title() {
+            class.push("titled");
+        }
+
+        let pointerdown = ctx.link().callback(MainPanelMsg::PointerEvent);
+        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.
+        let plugin_area = {
+            // 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();
+            let cells = ctx
+                .props()
+                .panel_ids
+                .iter()
+                .filter(|id| !ctx.props().workspace.is_staged(id))
+                .map(|id| {
+                    let name = id.as_str().to_owned();
+                    let mut class = classes!("rl-panel");
+                    if placed_count > 1 {
+                        if active_slot.as_deref() == Some(name.as_str()) {
+                            class.push("active");
+                        }
+                    } else {
+                        // 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.
+                    let on_activate = ctx.props().on_activate_panel.clone();
+                    let activate_name = name.clone();
+                    let onpointerdown = Callback::from(move |_: web_sys::PointerEvent| {
+                        on_activate.emit(activate_name.clone());
+                    });
+
+                    // 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.
+
+                    // `<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.
+                    //
+                    // 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
+                            name={name.clone()}
+                            key={name.clone()}
+                            {class}
+                            {onpointerdown}
+                        >
+                            <slot name={name.clone()} />
+                            <slot name={format!("tab-{name}")} slot="tab" />
+                        </regular-layout-frame>
+                    }
+                });
+
+            // 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
+                .iter()
+                .filter_map(|(id, title)| {
+                    title
+                        .as_ref()
+                        .map(|t| format!("--regular-layout-{id}--title:{};", css_string(t)))
+                })
+                .collect::<String>();
+
+            // 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).
+            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
+            // carries the `single` panel-count class (which e.g. hides the
+            // caret).
+            let closable = placed_count > 1;
+            let draggable = closable;
+            let single = !closable;
+            let on_select = {
+                let layout_ref = self.layout_ref.clone();
+                Callback::from(move |id: String| {
+                    if let Some(el) = layout_ref.cast::<web_sys::HtmlElement>() {
+                        let _ = el.unchecked_ref::<RegularLayout>().select(&id);
+                    }
+                })
+            };
+            // Close routes through the root `ClosePanel` (the same channel the
+            // context-menu "Close" uses), NOT `RegularLayout::remove_panel`.
+            // Closing is an APP-initiated state change, so it must mutate the
+            // `Workspace` (the source of truth) FIRST and dispose the panel
+            // synchronously; `MainPanel`'s reconcile then removes the cell from
+            // `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()").
+            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.
+            let on_rename = {
+                let workspace = ctx.props().workspace.clone();
+                Callback::from(move |(id, title): (String, Option<String>)| {
+                    if let Some(panel) = workspace.panel(&PanelId::from(id.as_str())) {
+                        panel.session.set_title(title);
+                    }
+                })
+            };
+            // The tab's open-settings button (the ONLY open-settings
+            // affordance — the status bar's button is gone): select the panel
+            // in the layout, activate it, then toggle the sidebar open. All
+            // three are synchronous root-message sends, so activation lands
+            // before the toggle and the sidebar binds the clicked panel's
+            // engines.
+            let on_open_settings = {
+                let on_select = on_select.clone();
+                let on_activate = ctx.props().on_activate_panel.clone();
+                let on_settings = ctx.props().on_settings.clone();
+                Callback::from(move |id: String| {
+                    on_select.emit(id.clone());
+                    on_activate.emit(id);
+                    on_settings.emit(());
+                })
+            };
+            let tabs = ctx
+                .props()
+                .panel_ids
+                .iter()
+                .filter(|id| !ctx.props().workspace.is_staged(id))
+                .map(|id| {
+                    let name = id.as_str().to_owned();
+                    let title = ctx
+                        .props()
+                        .panel_titles
+                        .iter()
+                        .find(|(pid, _)| pid == &name)
+                        .and_then(|(_, t)| t.clone());
+                    let active = active_slot.as_deref() == Some(name.as_str());
+                    let visible = !self.hidden_tabs.contains(name.as_str());
+                    let is_master = ctx.props().panel_masters.contains(id);
+                    let theme = ctx.props().effective_panel_theme(&name);
+
+                    html! {
+                        <PanelTab
+                            key={name.clone()}
+                            viewer={viewer_elem.clone()}
+                            panel_id={name.clone()}
+                            {title}
+                            {theme}
+                            {active}
+                            {visible}
+                            {is_master}
+                            {single}
+                            {closable}
+                            {is_settings_open}
+                            {draggable}
+                            on_select={on_select.clone()}
+                            on_close={on_close.clone()}
+                            on_open_settings={on_open_settings.clone()}
+                            on_context_menu={ctx.link().callback(|(id, x, y): (String, f64, f64)| MainPanelMsg::ContextMenu(Some(id), x, y))}
+                            on_rename={on_rename.clone()}
+                        />
+                    }
+                })
+                .collect::<Vec<_>>();
+
+            // STAGED panels: the plugin `<slot>` is delivered OUTSIDE the
+            // layout into a hidden wrapper, sized to the predicted
+            // post-insert cell by `size_staging_wrappers`. `visibility:
+            // hidden` (not `display: none`) so the plugin keeps a real box
+            // and a non-null `offsetParent` — first draws, redraw
+            // subscriptions and every observer (the host-level
+            // `AutoPauseHandle`/`ResizeObserverHandle` gates, the drag
+            // `ResizeObserver`s) see it exactly as they would a visible
+            // panel. No tab is rendered while staged.
+            let staging = ctx
+                .props()
+                .panel_ids
+                .iter()
+                .filter(|id| ctx.props().workspace.is_staged(id))
+                .map(|id| {
+                    let name = id.as_str().to_owned();
+                    html! {
+                        <div
+                            class="psp-staging"
+                            data-panel={name.clone()}
+                            key={format!("staging-{name}")}
+                        >
+                            <slot {name} />
+                        </div>
+                    }
+                });
+
+            // ONE flat FULLY-KEYED list: `<regular-layout>` + tabs + staging
+            // wrappers. Keying every sibling (the layout element included)
+            // routes Yew's list diff through `apply_keyed`, which matches by
+            // key — the layout element is REUSED across renders regardless of
+            // how the tab/staging population shifts around it. The prior
+            // shape (`<regular-layout>` + nested `{tabs}`/`{staging}` lists,
+            // layout unkeyed) took `apply_unkeyed`, whose back-to-front
+            // positional pairing REPLACED the layout element whenever the
+            // trailing lists changed length — orphaning its committed tree
+            // and attached listeners, and silently re-booting the layout
+            // from `EMPTY_PANEL` (see `listener_target`).
+            std::iter::once(html! {
+                <regular-layout
+                    key="__regular_layout__"
+                    ref={self.layout_ref.clone()}
+                    style={title_style}
+                >
+                    { for cells }
+                </regular-layout>
+            })
+            .chain(tabs)
+            .chain(staging)
+            .collect::<Html>()
+        };
+
+        // The cursor-anchored panel command menu — a body-mounted
+        // `PortalModal` (like the Export/Copy pickers it spawns), so its
+        // placement in this subtree is irrelevant. Themed by the TARGET
+        // panel's effective theme — its own, else the registry default —
+        // not the active/host theme (the target-less stage menu also takes
+        // the registry default). Maximize/Restore are handled locally;
+        // other commands forward to the root.
+        let panel_menu = self
+            .context_menu
+            .as_ref()
+            .map(|(x, y, id)| {
+                let theme = match id {
+                    Some(id) => ctx.props().effective_panel_theme(id),
+                    None => ctx
+                        .props()
+                        .presentation_props
+                        .available_themes
+                        .first()
+                        .cloned(),
+                };
+
+                let maximized = id
+                    .as_deref()
+                    .is_some_and(|id| self.maximized.as_deref() == Some(id));
+
+                html! {
+                    <PanelMenu
+                        x={*x}
+                        y={*y}
+                        panel_id={id.clone()}
+                        workspace={ctx.props().workspace.clone()}
+                        presentation={ctx.props().presentation.clone()}
+                        {theme}
+                        {maximized}
+                        on_command={ctx.link().callback(MainPanelMsg::Command)}
+                        on_close={ctx.link().callback(|_| MainPanelMsg::CloseContextMenu)}
+                    />
+                }
+            })
+            .unwrap_or_default();
+
+        html! {
+            <div id="main_column">
+                <StatusBar
+                    id="status_bar"
+                    on_reset={ctx.props().on_reset.clone()}
+                    session_props={ctx.props().session_props.clone()}
+                    presentation_props={ctx.props().presentation_props.clone()}
+                    is_settings_open={ctx.props().is_settings_open}
+                    update_count={ctx.props().update_count}
+                    global_filters={ctx.props().global_filters.clone()}
+                    on_remove_global_filter={ctx.props().on_remove_global_filter.clone()}
+                    on_clear_global_filters={ctx.props().on_clear_global_filters.clone()}
+                    {presentation}
+                    {renderer}
+                    {session}
+                    workspace={ctx.props().workspace.clone()}
+                />
+                <div
+                    id="main_panel_container"
+                    ref={self.main_panel_ref.clone()}
+                    {class}
+                    onpointerdown={pointerdown}
+                >
+                    <RenderWarning
+                        on_dismiss={on_dismiss_warning}
+                        dimensions={ctx.props().renderer_props.render_limits}
+                    />
+                    { plugin_area }
+                </div>
+                { panel_menu }
+            </div>
+        }
+    }
+}