@perspective-dev/viewer 5.0.0 → 5.1.0

package/src/rust/components/column_settings_sidebar.rs

@@ -13,12 +13,13 @@ mod attributes_tab;
 
 mod save_settings;
 pub(crate) mod style_tab;
+mod window_tab;
 
 use std::rc::Rc;
 
 use derivative::Derivative;
 use itertools::Itertools;
-use perspective_client::config::{ColumnType, Expression, ViewConfig};
+use perspective_client::config::{ColumnType, Expression, ViewConfig, WindowSpec};
 use perspective_client::utils::PerspectiveResultExt;
 use yew::{Callback, Component, Html, Properties, html, props};
 
@@ -27,15 +28,19 @@ use self::style_tab::StyleTabProps;
 use crate::components::column_settings_sidebar::attributes_tab::AttributesTab;
 use crate::components::column_settings_sidebar::save_settings::SaveSettingsProps;
 use crate::components::column_settings_sidebar::style_tab::StyleTab;
+use crate::components::column_settings_sidebar::window_tab::{WindowTab, WindowTabProps};
 use crate::components::containers::sidebar::Sidebar;
 use crate::components::containers::tab_list::TabList;
 use crate::components::editable_header::EditableHeaderProps;
 use crate::components::expression_editor::ExpressionEditorProps;
 use crate::components::type_icon::TypeIconType;
+use crate::components::window_editor::WindowEditorProps;
 use crate::presentation::{ColumnLocator, ColumnSettingsTab, Presentation};
 use crate::renderer::Renderer;
 use crate::session::{Session, SessionMetadataRc};
-use crate::tasks::{delete_expr, save_expr, update_expr};
+use crate::tasks::{
+    delete_expr, delete_window, save_expr, save_window, update_expr, update_window,
+};
 use crate::utils::PtrEqRc;
 
 #[derive(Clone, Derivative, Properties)]
@@ -47,9 +52,22 @@ pub struct ColumnSettingsPanelProps {
     pub width_override: Option<i32>,
     pub on_select_tab: Callback<ColumnSettingsTab>,
 
-    /// Active plugin name threaded as a value prop so that plugin changes
-    /// trigger re-initialization via `changed()` rather than a PubSub
-    /// `render_limits_changed` subscription.
+    /// Shared trap-door width across the drawer's Style/Attributes/Window
+    /// tabs.
+    #[prop_or_default]
+    pub auto_width: f64,
+
+    #[prop_or_default]
+    pub on_auto_width: Callback<f64>,
+
+    /// Whether the drawer is pinned into the layout.
+    #[prop_or_default]
+    pub is_pinned: bool,
+
+    #[prop_or_default]
+    pub on_toggle_pin: Callback<()>,
+
+    /// Active plugin name.
     pub plugin_name: Option<String>,
 
     /// Session metadata snapshot — threaded from `SessionProps`.
@@ -75,8 +93,10 @@ pub struct ColumnSettingsPanelProps {
     pub session: Session,
 }
 
-impl PartialEq for ColumnSettingsPanelProps {
-    fn eq(&self, other: &Self) -> bool {
+impl ColumnSettingsPanelProps {
+    /// Everything EXCEPT the trap-door `auto_width`: the props whose change
+    /// invalidates the drafts that `initialize` rebuilds.
+    fn identity_eq(&self, other: &Self) -> bool {
         self.selected_column == other.selected_column
             && self.selected_tab == other.selected_tab
             && self.plugin_name == other.plugin_name
@@ -87,12 +107,21 @@ impl PartialEq for ColumnSettingsPanelProps {
     }
 }
 
+impl PartialEq for ColumnSettingsPanelProps {
+    fn eq(&self, other: &Self) -> bool {
+        self.identity_eq(other)
+            && self.auto_width == other.auto_width
+            && self.is_pinned == other.is_pinned
+    }
+}
+
 #[derive(Debug)]
 pub enum ColumnSettingsPanelMsg {
     SetExprValue(Rc<String>),
     SetExprValid(bool),
     SetHeaderValue(Option<String>),
     SetHeaderValid(bool),
+    SetWindowValue(Option<WindowSpec>),
     SetSelectedTab((usize, ColumnSettingsTab)),
     OnSaveAttributes(()),
     OnResetAttributes(()),
@@ -117,6 +146,8 @@ pub struct ColumnSettingsPanel {
     reset_enabled: bool,
     save_count: u8,
     save_enabled: bool,
+    initial_window_value: Option<WindowSpec>,
+    window_value: Option<WindowSpec>,
     tabs: Vec<ColumnSettingsTab>,
 }
 
@@ -138,6 +169,8 @@ impl Component for ColumnSettingsPanel {
             reset_count: 0,
             column_name: "".to_owned(),
             maybe_ty: None,
+            initial_window_value: None,
+            window_value: None,
             tabs: vec![],
             on_input: Callback::default(),
             on_save: Callback::default(),
@@ -149,12 +182,15 @@ impl Component for ColumnSettingsPanel {
     }
 
     fn changed(&mut self, ctx: &yew::prelude::Context<Self>, old_props: &Self::Properties) -> bool {
-        if ctx.props() != old_props {
+        // Only reached when props are unequal. Re-`initialize` (which wipes
+        // in-progress expression/window drafts) only on IDENTITY changes -
+        // a trap-door `auto_width` change re-renders the `Sidebar` sizer
+        // alone.
+        if !ctx.props().identity_eq(old_props) {
             self.initialize(ctx);
-            true
-        } else {
-            false
         }
+
+        true
     }
 
     fn update(&mut self, ctx: &yew::prelude::Context<Self>, msg: Self::Message) -> bool {
@@ -187,6 +223,15 @@ impl Component for ColumnSettingsPanel {
                 self.save_enabled_effect();
                 true
             },
+            ColumnSettingsPanelMsg::SetWindowValue(val) => {
+                if self.window_value != val {
+                    self.window_value = val;
+                    self.reset_enabled = true;
+                    true
+                } else {
+                    false
+                }
+            },
             ColumnSettingsPanelMsg::SetSelectedTab((_, val)) => {
                 let rerender = ctx.props().selected_tab != Some(val);
                 ctx.props().on_select_tab.emit(val);
@@ -195,19 +240,58 @@ impl Component for ColumnSettingsPanel {
             ColumnSettingsPanelMsg::OnResetAttributes(()) => {
                 self.header_value.clone_from(&self.initial_header_value);
                 self.expr_value.clone_from(&self.initial_expr_value);
+                self.window_value.clone_from(&self.initial_window_value);
                 self.save_enabled = false;
                 self.reset_enabled = false;
                 self.reset_count += 1;
                 true
             },
             ColumnSettingsPanelMsg::OnSaveAttributes(()) => {
+                if matches!(ctx.props().selected_tab, Some(ColumnSettingsTab::Window)) {
+                    if let Some(spec) = self.window_value.clone() {
+                        let name = self
+                            .header_value
+                            .clone()
+                            .unwrap_or_else(|| self.column_name.clone());
+                        match &ctx.props().selected_column {
+                            ColumnLocator::Window(old_name) => update_window(
+                                &ctx.props().session,
+                                &ctx.props().renderer,
+                                &ctx.props().presentation,
+                                old_name.clone(),
+                                name,
+                                spec.clone(),
+                            ),
+                            _ => {
+                                if let Err(err) = save_window(
+                                    &ctx.props().session,
+                                    &ctx.props().renderer,
+                                    &ctx.props().presentation,
+                                    name,
+                                    spec.clone(),
+                                ) {
+                                    tracing::warn!("{}", err);
+                                }
+                            },
+                        }
+
+                        self.initial_window_value = Some(spec);
+                        self.initial_header_value.clone_from(&self.header_value);
+                        self.save_enabled = false;
+                        self.reset_enabled = false;
+                        self.save_count += 1;
+                    }
+
+                    return true;
+                }
+
                 let new_expr = Expression::new(
                     self.header_value.clone().map(|s| s.into()),
                     (*(self.expr_value)).clone().into(),
                 );
 
                 match &ctx.props().selected_column {
-                    ColumnLocator::Table(_) => {
+                    ColumnLocator::Table(_) | ColumnLocator::Window(_) => {
                         tracing::error!("Tried to save non-expression column!")
                     },
                     ColumnLocator::Expression(name) => update_expr(
@@ -244,6 +328,13 @@ impl Component for ColumnSettingsPanel {
                         &self.column_name,
                     )
                     .unwrap_or_log();
+                } else if ctx.props().selected_column.is_saved_window() {
+                    delete_window(
+                        &ctx.props().session,
+                        &ctx.props().renderer,
+                        &self.column_name,
+                    )
+                    .unwrap_or_log();
                 }
 
                 ctx.props().on_close.emit(());
@@ -253,15 +344,24 @@ impl Component for ColumnSettingsPanel {
     }
 
     fn view(&self, ctx: &yew::prelude::Context<Self>) -> Html {
+        let is_window_tab = matches!(ctx.props().selected_tab, Some(ColumnSettingsTab::Window));
+
+        let header_placeholder = if is_window_tab {
+            Rc::new(self.column_name.clone())
+        } else {
+            self.expr_value.clone()
+        };
+
         let header_props = props!(EditableHeaderProps {
             initial_value: self.initial_header_value.clone(),
-            placeholder: self.expr_value.clone(),
+            placeholder: header_placeholder,
             reset_count: self.reset_count,
-            editable: ctx.props().selected_column.is_expr()
+            editable: (ctx.props().selected_column.is_expr()
                 && matches!(
                     ctx.props().selected_tab,
                     Some(ColumnSettingsTab::Attributes)
-                ),
+                ))
+                || (ctx.props().selected_column.is_window_editable() && is_window_tab),
             update_on_input: true,
             icon_type: self
                 .maybe_ty
@@ -324,7 +424,26 @@ impl Component for ColumnSettingsPanel {
 
         let attrs_tab = AttributesTabProps {
             expr_editor,
-            save_section,
+            save_section: save_section.clone(),
+        };
+
+        let window_changed = self.window_value != self.initial_window_value
+            || self.header_value != self.initial_header_value;
+        let window_tab = WindowTabProps {
+            editor: WindowEditorProps {
+                metadata: ctx.props().metadata.clone(),
+                initial: self.initial_window_value.clone(),
+                on_change: ctx.link().callback(ColumnSettingsPanelMsg::SetWindowValue),
+                reset_count: self.reset_count,
+                presentation: ctx.props().presentation.clone(),
+                session: ctx.props().session.clone(),
+                selected_theme: ctx.props().selected_theme.clone(),
+            },
+            save_section: SaveSettingsProps {
+                save_enabled: self.window_value.is_some() && window_changed && self.header_valid,
+                show_danger_zone: ctx.props().selected_column.is_saved_window(),
+                ..save_section
+            },
         };
 
         let style_tab = StyleTabProps {
@@ -342,6 +461,7 @@ impl Component for ColumnSettingsPanel {
 
         let tab_children = self.tabs.iter().map(|tab| match tab {
             ColumnSettingsTab::Attributes => html! { <AttributesTab ..attrs_tab.clone() /> },
+            ColumnSettingsTab::Window => html! { <WindowTab ..window_tab.clone() /> },
             ColumnSettingsTab::Style => html! { <StyleTab ..style_tab.clone() /> },
         });
 
@@ -358,6 +478,10 @@ impl Component for ColumnSettingsPanel {
                     on_close={ctx.props().on_close.clone()}
                     id_prefix="column_settings"
                     width_override={ctx.props().width_override}
+                    auto_width={ctx.props().auto_width}
+                    on_auto_width={ctx.props().on_auto_width.clone()}
+                    is_pinned={ctx.props().is_pinned}
+                    on_toggle_pin={Some(ctx.props().on_toggle_pin.clone())}
                     selected_tab={selected_tab_idx}
                     {header_props}
                 >
@@ -403,6 +527,16 @@ impl ColumnSettingsPanel {
             .metadata
             .locator_view_type(&ctx.props().selected_column);
 
+        // Specs are unnamed (the `windows` map key names them, and the
+        // editable header owns naming in the UI), so drafts and saved specs
+        // compare directly.
+        let initial_window_value = ctx
+            .props()
+            .selected_column
+            .name()
+            .and_then(|name| ctx.props().view_config.windows.get(name))
+            .cloned();
+
         let tabs = {
             let mut tabs = vec![];
             let is_new_expr = ctx.props().selected_column.is_new_expr();
@@ -424,6 +558,17 @@ impl ColumnSettingsPanel {
                 tabs.push(ColumnSettingsTab::Attributes);
             }
 
+            let supports_windows = ctx
+                .props()
+                .metadata
+                .get_features()
+                .map(|x| x.has_window_aggregates())
+                .unwrap_or_default();
+
+            if ctx.props().selected_column.is_window_editable() && supports_windows {
+                tabs.push(ColumnSettingsTab::Window);
+            }
+
             tabs
         };
 
@@ -440,6 +585,8 @@ impl ColumnSettingsPanel {
             header_value: initial_header_value.clone(),
             initial_header_value,
             maybe_ty,
+            window_value: initial_window_value.clone(),
+            initial_window_value,
             tabs,
             header_valid: true,
             on_input,

package/src/rust/components/containers/dragdrop_list.rs

@@ -52,6 +52,21 @@ where
 
     #[prop_or_default]
     pub allow_duplicates: bool,
+
+    /// Single-slot mode: the list holds at most one item, a dragover
+    /// preview REPLACES the current item rather than inserting beside it,
+    /// and the trailing `EmptyColumn` autocomplete renders only while the
+    /// slot is empty.
+    #[prop_or_default]
+    pub single_slot: bool,
+
+    /// The in-flight drag is INVALID for this list (a parent-defined rule,
+    /// e.g. the window editor's Table-columns-only slots): the dragover
+    /// preview is suppressed and the invalid-X overlay renders instead,
+    /// like a duplicate drag over `group_by`/`split_by`. The parent's drop
+    /// handler is still responsible for ignoring the drop itself.
+    #[prop_or_default]
+    pub is_invalid: bool,
 }
 
 impl<T, U> PartialEq for DragDropListProps<T, U>
@@ -66,6 +81,8 @@ where
             && self.allow_duplicates == other.allow_duplicates
             && self.is_dragover == other.is_dragover
             && self.disabled == other.disabled
+            && self.single_slot == other.single_slot
+            && self.is_invalid == other.is_invalid
     }
 }
 
@@ -202,7 +219,51 @@ where
         let invalid_drag: bool;
         let mut valid_duplicate_drag = false;
 
-        let columns_html = {
+        let columns_html = if ctx.props().single_slot {
+            invalid_drag = ctx.props().is_invalid && ctx.props().is_dragover.is_some();
+
+            // Dragging the slot's own pill over its own slot is a no-op
+            // move - keep showing the pill instead of the drop preview
+            // (mirrors the multi-column branch's `is_self_move` handling).
+            let is_self_move = ctx
+                .props()
+                .presentation
+                .get_drag_target()
+                .map(|x| V::is_self_move(x))
+                .unwrap_or_default();
+
+            let close = ctx.props().parent.callback(|_| V::close(0));
+            let dragenter = ctx.props().parent.callback({
+                let container_noderef = container_noderef.clone();
+                move |event: DragEvent| {
+                    event.stop_propagation();
+                    event.prevent_default();
+                    if event.related_target().is_none()
+                        && let Some(elem) = container_noderef.cast::<HtmlElement>()
+                    {
+                        let _ = elem.dataset().set("safaridragleave", "true");
+                    }
+                    V::dragenter(0)
+                }
+            });
+
+            if ctx.props().is_dragover.is_some() && !is_self_move && !invalid_drag {
+                html! {
+                    <div class="pivot-column" ondragenter={dragenter}>
+                        <div class="config-drop" />
+                    </div>
+                }
+            } else if let Some(column) = ctx.props().children.iter().next() {
+                html! {
+                    <div class="pivot-column" ondragenter={dragenter}>
+                        { Html::from(column) }
+                        <span class="row_close" onmousedown={close} />
+                    </div>
+                }
+            } else {
+                html! {}
+            }
+        } else {
             let mut columns = ctx
                 .props()
                 .children
@@ -211,7 +272,10 @@ where
                 .enumerate()
                 .collect::<Vec<_>>();
 
-            invalid_drag = if let Some((x, column)) = &ctx.props().is_dragover {
+            invalid_drag = if ctx.props().is_invalid && ctx.props().is_dragover.is_some() {
+                // Parent-defined invalidity: no preview, X overlay only.
+                true
+            } else if let Some((x, column)) = &ctx.props().is_dragover {
                 let index = *x;
                 let is_append = index == columns.len();
                 let is_self_move = ctx
@@ -314,6 +378,12 @@ where
                 .collect::<Html>()
         };
 
+        let show_empty = if ctx.props().single_slot {
+            ctx.props().children.is_empty() && ctx.props().is_dragover.is_none()
+        } else {
+            ctx.props().is_dragover.is_none() | (!invalid_drag && valid_duplicate_drag)
+        };
+
         let column_dropdown = ctx.props().column_dropdown.clone();
         let exclude = ctx.props().exclude.clone();
         let on_select = ctx.props().parent.callback(V::create);
@@ -345,7 +415,7 @@ where
                                         onmousedown={ctx.props().parent.callback(move |_| V::close(0))}
                                     />
                                 </div>
-                            } else if ctx.props().is_dragover.is_none() | (!invalid_drag && valid_duplicate_drag) {
+                            } else if show_empty {
                                 <EmptyColumn {column_dropdown} {exclude} {on_select} />
                             } else if invalid_drag {
                                 <InvalidColumn />

package/src/rust/components/containers/sidebar.rs

@@ -11,14 +11,17 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 use perspective_client::clone;
-use web_sys::Element;
+use wasm_bindgen::JsCast;
+use wasm_bindgen::prelude::Closure;
+use web_sys::HtmlElement;
 use yew::{
-    Callback, Children, Html, Properties, function_component, html, use_effect_with, use_node_ref,
-    use_state_eq,
+    Callback, Children, Html, Properties, function_component, html, use_effect_with, use_mut_ref,
+    use_node_ref,
 };
 
 use crate::components::containers::sidebar_close_button::SidebarCloseButton;
 use crate::components::editable_header::{EditableHeader, EditableHeaderProps};
+use crate::js::{ResizeObserver, ResizeObserverEntry};
 
 #[derive(PartialEq, Clone, Properties)]
 pub struct SidebarProps {
@@ -31,6 +34,28 @@ pub struct SidebarProps {
     pub width_override: Option<i32>,
     pub selected_tab: Option<usize>,
     pub header_props: EditableHeaderProps,
+
+    /// Trap-door width shared across this sidebar's tabs: the lifted
+    /// running max of the widths this component reports through
+    /// `on_auto_width`. Held by the parent (ultimately
+    /// `PerspectiveViewer`'s geometry state, like the settings panel's
+    /// Query/Plugin/Debug trap-door) so it survives tab switches AND
+    /// sidebar re-mounts, and clears on divider reset.
+    #[prop_or_default]
+    pub auto_width: f64,
+
+    /// Fires with the sidebar's rendered width after each render; the
+    /// owner keeps the running max threaded back as `auto_width`.
+    #[prop_or_default]
+    pub on_auto_width: Callback<f64>,
+
+    /// Pinned state for the header's pin toggle; the button renders only
+    /// when `on_toggle_pin` is provided.
+    #[prop_or_default]
+    pub is_pinned: bool,
+
+    #[prop_or_default]
+    pub on_toggle_pin: Option<Callback<()>>,
 }
 
 /// Sidebars are designed to live in a
@@ -39,33 +64,85 @@ pub struct SidebarProps {
 pub fn Sidebar(p: &SidebarProps) -> Html {
     let id = &p.id_prefix;
     let noderef = use_node_ref();
-    let auto_width = use_state_eq(|| 0f64);
-
-    // this gets the last calculated width and ensures that
-    // the auto-width element is at least that big.
-    // this ensures the panel grows but does not shrink.
-    use_effect_with(p.clone(), {
-        clone!(noderef, auto_width);
-        move |p| {
-            if p.width_override.is_none() {
-                let updated_width = noderef
-                    .cast::<Element>()
-                    .map(|el| el.get_bounding_client_rect().width())
-                    .unwrap_or_default();
-                let new_auto_width = (*auto_width).max(updated_width);
-                auto_width.set(new_auto_width);
-            } else {
-                auto_width.set(0f64);
+
+    // The trap-door reports the sidebar's rendered width to its owner via
+    // a `ResizeObserver` on the sidebar element, NOT a render effect:
+    // width changes are driven by DOM mutations anywhere in the tab
+    // subtree (e.g. the window editor staging a long column name into a
+    // slot), which need not re-render this component at all. The observer
+    // sees every one. `contentRect` (not the border box) is load-bearing:
+    // the sizer below is a content child, so ratcheting the border box
+    // would feed any sidebar padding back into unbounded growth. A manual
+    // divider drag (`width_override`) disables the ratchet until the
+    // divider resets.
+    let live_props = use_mut_ref(|| (Callback::<f64>::default(), None::<i32>));
+    *live_props.borrow_mut() = (p.on_auto_width.clone(), p.width_override);
+    use_effect_with((), {
+        clone!(noderef, live_props);
+        move |_| {
+            let closure =
+                Closure::<dyn FnMut(js_sys::Array)>::new(move |entries: js_sys::Array| {
+                    let (on_auto_width, width_override) = live_props.borrow().clone();
+                    if width_override.is_none() {
+                        for entry in entries.iter() {
+                            let entry: ResizeObserverEntry = entry.unchecked_into();
+                            on_auto_width.emit(entry.content_rect().width());
+                        }
+                    }
+                });
+
+            let observer = ResizeObserver::new(closure.as_ref().unchecked_ref());
+            let elem = noderef.cast::<HtmlElement>();
+            if let Some(elem) = &elem {
+                observer.observe(elem);
+            }
+
+            move || {
+                if let Some(elem) = &elem {
+                    observer.unobserve(elem);
+                }
+
+                drop(closure);
             }
         }
     });
 
-    let width_style = format!("min-width: 200px; width: {}px", *auto_width);
+    let auto_width = if p.width_override.is_none() {
+        p.auto_width
+    } else {
+        0.0
+    };
+
+    let width_style = format!("min-width: 200px; width: {}px", auto_width);
+    let pin_button = p.on_toggle_pin.as_ref().map(|cb| {
+        let onclick = {
+            let cb = cb.clone();
+            Callback::from(move |_: web_sys::MouseEvent| cb.emit(()))
+        };
+
+        let mut class = yew::classes!("sidebar_pin_button");
+        if p.is_pinned {
+            class.push("is-pinned");
+        }
+
+        html! {
+            <span
+                id={format!("{id}_pin_button")}
+                {class}
+                title={if p.is_pinned { "Unpin" } else { "Pin" }}
+                {onclick}
+            />
+        }
+    });
+
     html! {
         <>
             <SidebarCloseButton id={format!("{id}_close_button")} on_close_sidebar={&p.on_close} />
             <div class="sidebar_column" id={format!("{id}_sidebar")} ref={noderef}>
-                <div class="sidebar_header"><EditableHeader ..p.header_props.clone() /></div>
+                <div class="sidebar_header">
+                    <EditableHeader ..p.header_props.clone() />
+                    { pin_button }
+                </div>
                 <div class="sidebar_border" id={format!("{id}_border")} />
                 { p.children.iter().collect::<Html>() }
                 <div class="sidebar-auto-width" style={width_style} />

package/src/rust/components/containers/split_panel.rs

@@ -26,6 +26,10 @@ pub struct SplitPanelProps {
     #[prop_or_default]
     pub id: Option<String>,
 
+    /// Extra classes on the root element (ignored under `no_wrap`).
+    #[prop_or_default]
+    pub class: Classes,
+
     #[prop_or_default]
     pub orientation: Orientation,
 
@@ -110,6 +114,7 @@ impl SplitPanelProps {
 impl PartialEq for SplitPanelProps {
     fn eq(&self, other: &Self) -> bool {
         self.id == other.id
+            && self.class == other.class
             && self.children == other.children
             && self.orientation == other.orientation
             && self.reverse == other.reverse
@@ -305,6 +310,7 @@ impl Component for SplitPanel {
         }
 
         let mut classes = classes!("split-panel");
+        classes.extend(ctx.props().class.clone());
         if orientation == Orientation::Vertical {
             classes.push("orient-vertical");
         }

package/src/rust/components/editable_header.rs

@@ -119,10 +119,12 @@ impl Component for EditableHeader {
                     }
                     let metadata = &ctx.props().metadata;
                     let expressions = metadata.get_expression_columns();
+                    let windows = metadata.get_window_columns();
                     let found = metadata
                         .get_table_columns()?
                         .iter()
                         .chain(expressions)
+                        .chain(windows)
                         .contains(&new_value);
                     Some(!found)
                 })()

package/src/rust/components/main_panel.rs

@@ -291,6 +291,11 @@ impl Component for MainPanel {
             .link()
             .callback(|(id, x, y)| MainPanelMsg::ContextMenu(id, x, y));
         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() {
+                return;
+            }
+
             let path = event.composed_path();
             let mut panel_id = None;
             for i in 0..path.length() {

package/src/rust/components/mod.rs

@@ -48,3 +48,4 @@ pub mod style;
 pub mod style_controls;
 pub mod type_icon;
 pub mod viewer;
+pub mod window_editor;