@perspective-dev/viewer 4.5.1 → 5.0.0

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

@@ -0,0 +1,184 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! The small `MainPanelMsg` handlers dispatched from `MainPanel::update` —
+//! pointer forwarding, layout-close detection, tab/active sync, and the panel
+//! context menu. The heavier `BeforeResize` presize lives in
+//! [`super::presize`].
+
+use perspective_js::utils::JsValueSerdeExt;
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+
+use super::MainPanel;
+use crate::components::panel_menu::PanelCommand;
+use crate::js::{Layout, RegularLayout};
+use crate::tasks::resize_callback;
+
+impl MainPanel {
+    pub(super) fn on_pointer_event(
+        &self,
+        ctx: &Context<Self>,
+        event: web_sys::PointerEvent,
+    ) -> bool {
+        if event.target().map(JsValue::from)
+            == self
+                .main_panel_ref
+                .cast::<web_sys::HtmlElement>()
+                .map(JsValue::from)
+        {
+            ctx.props().presentation.statusbar_pointer_event.emit(event);
+        }
+
+        false
+    }
+
+    pub(super) fn on_layout_updated(&mut self, ctx: &Context<Self>) -> bool {
+        // A panel still tracked in `inserted` but no longer present in
+        // the layout (calculatePath → null) was removed by the layout —
+        // i.e. its frame's close button was pressed. Report it for
+        // disposal.
+        let Some(el) = self.layout_ref.cast::<web_sys::HtmlElement>() else {
+            return false;
+        };
+
+        // A `regular-layout-update` ends any in-flight drag (it fires on
+        // the drop, not during the drag). Drop the drag ResizeObserver(s)
+        // bound in `BeforeResize`; the post-commit `resize_callback` loop
+        // below resizes the dropped panel to its final cell.
+        self.panel_resize_observers.clear();
+
+        let layout: RegularLayout = el.unchecked_into();
+        let mut closed = Vec::new();
+        self.inserted.retain(|id| {
+            if layout.contains_panel(id) {
+                true
+            } else {
+                closed.push(id.clone());
+                false
+            }
+        });
+
+        for id in closed {
+            ctx.props().on_close_panel.emit(id);
+        }
+
+        // A layout change (divider drag, insert, restore) reflows the
+        // grid cells without resizing the host, so the host
+        // `ResizeObserver` never fires. Resize every activated panel's
+        // plugin to match its new cell size — same per-panel
+        // `resize_callback` the insert path uses (idempotent, and each
+        // `Renderer` debounces its own resize).
+        for id in ctx.props().panel_ids.iter() {
+            // Skip any panel regular-layout reports as absent — it's
+            // leaving the layout (a close / drag-out in flight). Spawning
+            // a resize draw for it would race its disposal, and spawned
+            // tasks can't be cancelled. App-initiated closes already drop
+            // the panel from `panel_ids` before this fires; this also
+            // covers a layout-originated removal.
+            if !layout.contains_panel(id.as_str()) {
+                continue;
+            }
+
+            if let Some(panel) = ctx.props().workspace.panel(id)
+                && panel.renderer.is_plugin_activated().unwrap_or(false)
+            {
+                resize_callback(&panel.session, &panel.renderer).emit(());
+            }
+        }
+
+        // Recompute which panels are hidden behind an unselected stack
+        // index. Selection changes route through `restore` and so also
+        // fire `regular-layout-update` — this is the single point of
+        // truth for tab visibility. Re-render only when it changed, so
+        // each `PanelTab` re-syncs its `visible` class.
+        let hidden = layout
+            .save()
+            .into_serde_ext::<Layout>()
+            .map(|tree| tree.hidden_slot_names().into_iter().collect())
+            .unwrap_or_default();
+
+        if hidden != self.hidden_tabs {
+            self.hidden_tabs = hidden;
+            true
+        } else {
+            false
+        }
+    }
+
+    pub(super) fn on_tab_selected(&self, ctx: &Context<Self>, name: String) -> bool {
+        ctx.props().on_activate_panel.emit(name);
+        false
+    }
+
+    pub(super) fn on_context_menu(
+        &mut self,
+        ctx: &Context<Self>,
+        id: Option<String>,
+        x: f64,
+        y: f64,
+    ) -> bool {
+        // 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 {
+            ctx.props().on_activate_panel.emit(id.clone());
+        }
+
+        self.context_menu = Some((x, y, id));
+        true
+    }
+
+    pub(super) fn on_close_context_menu(&mut self) -> bool {
+        self.context_menu = None;
+        true
+    }
+
+    pub(super) fn on_command(&mut self, ctx: &Context<Self>, cmd: PanelCommand) -> bool {
+        let Some((_, _, target)) = self.context_menu.clone() else {
+            return false;
+        };
+
+        match cmd {
+            // Maximize/Restore act on the layout element this
+            // component owns. As of regular-layout 0.6.1 both route
+            // through the presize queue (cancelable `before-resize`
+            // with the post-transition paths), so the shared
+            // `BeforeResize` gate presizes the now-visible plugin(s)
+            // — no reactive post-commit resize sweep needed.
+            PanelCommand::Maximize => {
+                if let Some(id) = target
+                    && let Some(el) = self.layout_ref.cast::<web_sys::HtmlElement>()
+                {
+                    el.unchecked_ref::<RegularLayout>().maximize(&id);
+                    self.maximized = Some(id);
+                }
+            },
+            PanelCommand::Restore => {
+                if let Some(el) = self.layout_ref.cast::<web_sys::HtmlElement>() {
+                    el.unchecked_ref::<RegularLayout>().minimize();
+                }
+
+                self.maximized = None;
+            },
+            // The stage menu (no target panel) offers ONLY `NewFrom`, whose
+            // handler resolves the client/table purely from the loaded-clients
+            // registry — the panel id is unused there, so the empty id never
+            // reaches a panel lookup.
+            cmd => ctx
+                .props()
+                .on_panel_command
+                .emit((target.unwrap_or_default(), cmd)),
+        }
+
+        false
+    }
+}

package/src/rust/components/main_panel.rs

@@ -10,18 +10,46 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+//! `MainPanel`: the multi-panel layout host. Owns the `<regular-layout>`
+//! element, the per-panel `<PanelTab>`s, the shared status bar, and the panel
+//! context menu. The `Component` impl below is thin — its handlers live in the
+//! submodules:
+//!
+//! - [`update`] — the small `MainPanelMsg` handlers (pointer, close detection,
+//!   tab/active sync, context menu).
+//! - [`presize`] — the `BeforeResize` pre-size-every-plugin algorithm.
+//! - [`reconcile`] — the `rendered` layout reconcile + per-panel theme stamp.
+//! - [`frame_theme`] — the `rendered` frame-background mirror (each
+//!   `<regular-layout-frame>`'s panel-theme background var).
+//! - [`render`] — the `view` (status bar, cells, tabs, menu).
+
+mod frame_theme;
+mod presize;
+mod reconcile;
+mod render;
+mod update;
+
+pub mod msg;
+
+use std::collections::{HashMap, HashSet};
+
+use perspective_js::utils::JsValueSerdeExt;
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
-use super::render_warning::RenderWarning;
-use super::status_bar::StatusBar;
+pub use self::msg::MainPanelMsg;
+use super::panel_menu::PanelCommand;
 use crate::presentation::{Presentation, PresentationProps};
 use crate::renderer::*;
 use crate::session::{Session, SessionProps};
-use crate::tasks::dismiss_render_warning_callback;
+use crate::tasks::PanelResizeObserverHandle;
+use crate::workspace::{PanelId, Workspace};
 
 #[derive(Clone, Properties)]
 pub struct MainPanelProps {
+    /// Toggle the settings sidebar open. Fired by a `PanelTab`'s open-settings
+    /// button (after selecting + activating that panel) — the tabs are the
+    /// only open-settings affordance.
     pub on_settings: Callback<()>,
 
     /// Reset callback forwarded from the root component.  Fired when the user
@@ -29,6 +57,21 @@ pub struct MainPanelProps {
     /// + column configs), `false` for config-only.
     pub on_reset: Callback<bool>,
 
+    /// Fired with a panel id when its frame titlebar is pressed, to make it the
+    /// active panel.
+    pub on_activate_panel: Callback<String>,
+
+    /// Fired with a panel id when its frame's close button removes it from the
+    /// layout, so the root can dispose the panel.
+    pub on_close_panel: Callback<String>,
+
+    /// Fired with `(panel id, command)` when the panel context menu selects a
+    /// command the root executes (New/Duplicate/Reset/ToggleMaster/Close).
+    /// Maximize/Restore are handled HERE (this component owns the layout
+    /// element), and Export/Copy end-to-end by
+    /// [`PanelMenu`](super::panel_menu::PanelMenu) itself.
+    pub on_panel_command: Callback<(String, PanelCommand)>,
+
     /// Snapshots threaded from root.  Read for `has_table`, `title` here in
     /// the panel itself; threaded wholesale to `StatusBar`/`StatusIndicator`.
     pub session_props: SessionProps,
@@ -41,7 +84,42 @@ pub struct MainPanelProps {
     /// Root-managed in-flight render counter (not engine state).
     pub update_count: u32,
 
-    /// State
+    /// Ids of every layout panel, in order; one `<regular-layout>` cell is
+    /// rendered per id. Drives re-render when panels are added/removed.
+    pub panel_ids: Vec<PanelId>,
+
+    /// `(panel id, session title)` for every panel. Rendered into the
+    /// `<regular-layout>` `style` as `--regular-layout-<id>--title` custom
+    /// properties, which regular-layout's tabs display via `::before` content.
+    pub panel_titles: Vec<(String, Option<String>)>,
+
+    /// `(panel id, per-panel theme)` for every panel. A snapshot so a
+    /// per-panel theme change re-renders MainPanel — `renderer.theme()` is
+    /// interior-mutable and not otherwise observed by `eq`. Each frame inlines
+    /// its theme's `--psp-*` block only when it diverges from the host theme.
+    pub panel_themes: Vec<(String, Option<String>)>,
+
+    /// The master (filter-source) panel ids, sorted. A snapshot so a master
+    /// toggle re-renders MainPanel — the role set is interior-mutable on
+    /// `Workspace` and not otherwise observed by `eq`. Drives each tab's
+    /// broadcast badge.
+    pub panel_masters: Vec<PanelId>,
+
+    /// Element-level global filters (fed by master/detail selection), threaded
+    /// to the `StatusBar` where the global-filter chips are rendered.
+    pub global_filters: Vec<perspective_client::config::Filter>,
+
+    /// Remove the global filter at this index (a chip's × in the `StatusBar`).
+    pub on_remove_global_filter: Callback<usize>,
+
+    /// Clear all global filters (the "Clear" affordance in the `StatusBar`).
+    pub on_clear_global_filters: Callback<()>,
+
+    /// The multi-panel model, for per-panel `Renderer`/`Session` access when
+    /// reconciling `insertPanel`/`removePanel`.
+    pub workspace: Workspace,
+
+    /// State (the *active* panel's handles — for the shared status bar).
     pub session: Session,
     pub renderer: Renderer,
     pub presentation: Presentation,
@@ -54,6 +132,15 @@ impl PartialEq for MainPanelProps {
             && self.presentation_props == rhs.presentation_props
             && self.is_settings_open == rhs.is_settings_open
             && self.update_count == rhs.update_count
+            && self.panel_ids == rhs.panel_ids
+            && self.panel_titles == rhs.panel_titles
+            && self.panel_themes == rhs.panel_themes
+            && self.panel_masters == rhs.panel_masters
+            && self.global_filters == rhs.global_filters
+            && self.workspace == rhs.workspace
+            && self.session == rhs.session
+            && self.renderer == rhs.renderer
+            && self.presentation == rhs.presentation
     }
 }
 
@@ -61,99 +148,252 @@ impl MainPanelProps {
     fn is_title(&self) -> bool {
         self.session_props.title.is_some()
     }
-}
 
-#[derive(Debug)]
-pub enum MainPanelMsg {
-    PointerEvent(web_sys::PointerEvent),
+    pub(super) fn effective_panel_theme(&self, id: &str) -> Option<String> {
+        self.panel_themes
+            .iter()
+            .find(|(pid, _)| pid == id)
+            .and_then(|(_, theme)| theme.clone())
+            .or_else(|| self.presentation_props.available_themes.first().cloned())
+    }
 }
 
 pub struct MainPanel {
     main_panel_ref: NodeRef,
+
+    /// Ref to the `<regular-layout>` element hosting the panel cells.
+    layout_ref: NodeRef,
+
+    /// Panel slots currently placed in `layout_ref`'s grid, reconciled against
+    /// `panel_ids` on each render so we `insertPanel`/`removePanel` exactly
+    /// once per add/remove.
+    inserted: Vec<String>,
+
+    /// `regular-layout-update` listener (close detection); kept alive here and
+    /// attached to the layout element once in `rendered`.
+    _layout_update_listener: Closure<dyn FnMut(web_sys::Event)>,
+
+    /// `regular-layout-select` listener (active-panel sync); kept alive here
+    /// and attached alongside the update listener.
+    _layout_select_listener: Closure<dyn FnMut(web_sys::Event)>,
+
+    /// `regular-layout-before-resize` listener (presize hook); kept alive here
+    /// 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: Closure<dyn FnMut(web_sys::Event)>,
+
+    /// The `<regular-layout>` ELEMENT the layout listeners are attached to.
+    /// Compared by identity in `reconcile` — if the element is ever a
+    /// different instance (it should never be: the render keys it into a
+    /// fully-keyed sibling list precisely so Yew reuses it), the listeners
+    /// are re-attached and `inserted` is reset so the fresh (empty) layout
+    /// is repopulated instead of silently orphaning every panel. A latched
+    /// `bool` here once turned an unkeyed-diff element replacement into
+    /// "Duplicate commits into an EMPTY tree with no `before-resize`
+    /// listener": the old element left the DOM with the committed tree and
+    /// every listener, and nothing ever noticed.
+    listener_target: Option<web_sys::HtmlElement>,
+
+    /// 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
+    /// excluded from the presize paths, and the `overlay` presize is disabled);
+    /// dropped on `LayoutUpdated` (the drop).
+    panel_resize_observers: HashMap<String, PanelResizeObserverHandle>,
+
+    /// Panels currently *hidden* behind an unselected index of a tab stack,
+    /// recomputed from the layout tree on every `regular-layout-update`.
+    /// Drives each tab's `visible` prop (`PanelTab` marks the front tab of
+    /// every stack, not just the active panel). Empty until the first layout
+    /// update — every panel starts visible.
+    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.
+    context_menu: Option<(f64, f64, Option<String>)>,
+
+    /// Id of the currently maximized panel (via `regular-layout.maximize`), or
+    /// `None`. Transient (regular-layout doesn't persist it); drives the
+    /// Maximize/Restore menu label. Cleared when the panel leaves the layout.
+    maximized: Option<String>,
+
+    /// Theme-name-keyed cache of backgrounds read off stamped plugin
+    /// elements, the mirror source for frames whose own plugin is unreadable
+    /// (see [`frame_theme`]). Cleared when the theme registry changes.
+    theme_backgrounds: HashMap<String, String>,
+
+    /// The inputs `stamp_frame_themes` last mirrored from; unchanged inputs
+    /// skip the pass (and its forced style recalcs) on unrelated re-renders.
+    /// `None` until the first *fully-resolved* pass — an unresolved frame
+    /// leaves it unlatched so the mirror retries each render.
+    stamped_frame_themes: Option<frame_theme::FrameThemeSnapshot>,
+
+    /// `Workspace::staged_changed` → [`MainPanelMsg::StagedChanged`] on THIS
+    /// component's scope (see the message doc for why not the root's).
+    _staged_sub: crate::utils::Subscription,
 }
 
 impl Component for MainPanel {
     type Message = MainPanelMsg;
     type Properties = MainPanelProps;
 
-    fn create(_ctx: &Context<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
+        let cb = ctx.link().callback(|_: ()| MainPanelMsg::LayoutUpdated);
+        let listener = Closure::wrap(
+            Box::new(move |_: web_sys::Event| cb.emit(())) as Box<dyn FnMut(web_sys::Event)>
+        );
+
+        let select_cb = ctx.link().callback(MainPanelMsg::TabSelected);
+        let select_listener = Closure::wrap(Box::new(move |event: web_sys::Event| {
+            #[derive(serde::Deserialize)]
+            struct SelectDetail {
+                name: String,
+            }
+
+            if let Some(custom) = event.dyn_ref::<web_sys::CustomEvent>()
+                && let Ok(SelectDetail { name }) = custom.detail().into_serde_ext()
+            {
+                select_cb.emit(name);
+            }
+        }) 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`).
+        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.
+        let contextmenu_cb = ctx
+            .link()
+            .callback(|(id, x, y)| MainPanelMsg::ContextMenu(id, x, y));
+        let contextmenu_listener = Closure::wrap(Box::new(move |event: web_sys::Event| {
+            let path = event.composed_path();
+            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(name) = el.get_attribute("name")
+                {
+                    panel_id = Some(name);
+                    break;
+                }
+            }
+
+            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.
+        }) as Box<dyn FnMut(web_sys::Event)>);
+
+        let staged_sub = {
+            use crate::utils::AddListener;
+            let cb = ctx.link().callback(|_: ()| MainPanelMsg::StagedChanged);
+            ctx.props()
+                .workspace
+                .staged_changed()
+                .add_listener(move |()| cb.emit(()))
+        };
+
         Self {
             main_panel_ref: NodeRef::default(),
+            layout_ref: NodeRef::default(),
+            inserted: Vec::new(),
+            _layout_update_listener: listener,
+            _layout_select_listener: select_listener,
+            _layout_before_resize_listener: before_resize_listener,
+            _contextmenu_listener: contextmenu_listener,
+            listener_target: None,
+            panel_resize_observers: HashMap::new(),
+            hidden_tabs: HashSet::new(),
+            context_menu: None,
+            maximized: None,
+            theme_backgrounds: HashMap::new(),
+            stamped_frame_themes: None,
+            _staged_sub: staged_sub,
         }
     }
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            MainPanelMsg::PointerEvent(event) => {
-                if event.target().map(JsValue::from)
-                    == self
-                        .main_panel_ref
-                        .cast::<web_sys::HtmlElement>()
-                        .map(JsValue::from)
-                {
-                    ctx.props().presentation.statusbar_pointer_event.emit(event);
-                }
-
-                false
-            },
+            MainPanelMsg::PointerEvent(event) => self.on_pointer_event(ctx, event),
+            MainPanelMsg::StagedChanged => true,
+            MainPanelMsg::LayoutUpdated => self.on_layout_updated(ctx),
+            MainPanelMsg::TabSelected(name) => self.on_tab_selected(ctx, name),
+            MainPanelMsg::ContextMenu(id, x, y) => self.on_context_menu(ctx, id, x, y),
+            MainPanelMsg::CloseContextMenu => self.on_close_context_menu(),
+            MainPanelMsg::Command(cmd) => self.on_command(ctx, cmd),
+            MainPanelMsg::BeforeResize(event) => self.on_before_resize(ctx, event),
         }
     }
 
-    fn changed(&mut self, _ctx: &Context<Self>, _old: &Self::Properties) -> bool {
-        true
+    fn changed(&mut self, ctx: &Context<Self>, old: &Self::Properties) -> bool {
+        ctx.props() != old
     }
 
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let Self::Properties {
-            presentation,
-            renderer,
-            session,
-            ..
-        } = ctx.props();
-
-        let is_settings_open = ctx.props().is_settings_open;
-        let on_settings = (!is_settings_open).then(|| ctx.props().on_settings.clone());
-
-        let mut class = classes!();
-        if !is_settings_open {
-            class.push("settings-closed");
+    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(),
+            );
         }
 
-        if ctx.props().is_title() {
-            class.push("titled");
-        }
+        self.size_staging_wrappers();
+        self.reconcile(ctx);
+        self.stamp_frame_themes(ctx);
+    }
 
-        let pointerdown = ctx.link().callback(MainPanelMsg::PointerEvent);
-        let on_dismiss_warning = dismiss_render_warning_callback(session, renderer);
-
-        html! {
-            <div id="main_column">
-                <StatusBar
-                    id="status_bar"
-                    {on_settings}
-                    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}
-                    {presentation}
-                    {renderer}
-                    {session}
-                />
-                <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}
-                    />
-                    <slot />
-                </div>
-            </div>
-        }
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        self.render(ctx)
     }
 
     fn destroy(&mut self, _ctx: &Context<Self>) {}

package/src/rust/components/mod.rs

@@ -18,6 +18,7 @@ pub mod column_dropdown;
 pub mod column_selector;
 pub mod column_settings_sidebar;
 pub mod containers;
+pub mod context_menu;
 pub mod copy_dropdown;
 pub mod datetime_column_style;
 pub mod editable_header;
@@ -28,9 +29,12 @@ pub mod filter_dropdown;
 pub mod font_loader;
 pub mod form;
 pub mod function_dropdown;
+pub mod global_filter_bar;
 pub mod main_panel;
 pub mod modal;
 pub mod number_series_style;
+pub mod panel_menu;
+pub mod panel_tab;
 pub mod plugin_selector;
 pub mod plugin_tab;
 pub mod portal;

package/src/rust/components/number_series_style.rs

@@ -14,10 +14,8 @@ use web_sys::{HtmlInputElement, InputEvent};
 use yew::prelude::*;
 
 use super::modal::{ModalLink, SetModalLink};
-use super::style::LocalStyle;
 use crate::components::form::select_enum_field::SelectEnumField;
 use crate::config::*;
-use crate::css;
 use crate::utils::WeakScope;
 
 #[derive(Properties)]
@@ -125,7 +123,6 @@ impl Component for NumberSeriesStyle {
 
         html! {
             <>
-                <LocalStyle href={css!("column-style")} />
                 <div id="column-style-container" class="number-series-style-container">
                     <SelectEnumField<ChartType>
                         label="chart-type"