@perspective-dev/viewer 5.3.0 → 5.4.0

package/src/rust/{components → ui}/portal.rs

@@ -19,31 +19,61 @@ use wasm_bindgen::prelude::*;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::components::modal::ModalOrientation;
-use crate::components::style::{StyleProvider, StyleSurface};
+use crate::ui::modal::ModalOrientation;
+use crate::ui::style::StyleProvider;
 use crate::utils::*;
 
+/// The `slot` every modal host is assigned in the viewer's light DOM, so it
+/// is in the flat tree.
+pub const MODAL_SLOT: &str = "modal";
+
+/// Find the `<perspective-viewer>` that `target` lives in — as a light-DOM
+/// descendant, or through any number of shadow roots.
+fn nearest_viewer(target: &HtmlElement) -> Option<HtmlElement> {
+    let is_viewer = |el: &Element| el.tag_name().eq_ignore_ascii_case("perspective-viewer");
+    if let Ok(Some(viewer)) = target.closest("perspective-viewer") {
+        return Some(viewer.unchecked_into());
+    }
+
+    let mut node: Node = target.clone().into();
+    loop {
+        let root = node.get_root_node();
+        let host = root.dyn_ref::<ShadowRoot>()?.host();
+        if is_viewer(&host) {
+            return Some(host.unchecked_into());
+        }
+
+        if let Ok(Some(viewer)) = host.closest("perspective-viewer") {
+            return Some(viewer.unchecked_into());
+        }
+
+        node = host.into();
+    }
+}
+
+/// A modal (menu / completion dropdown) anchored to a `target` element,
+/// hosted as a light-DOM child of the `<perspective-viewer>` in the top layer.
 #[derive(Properties, PartialEq)]
 pub struct PortalModalProps {
     pub children: Children,
-
-    /// The element to position relative to. `None` means closed.
     pub target: Option<HtmlElement>,
+    pub tag_name: &'static str,
+    pub theme: String,
+    pub sheet: web_sys::CssStyleSheet,
 
-    /// Whether the portal manages its own focus and closes on blur.
+    /// Adds this component's own light-dismiss (an outside `pointerdown` or
+    /// Escape → `on_close`) instead of `popover="auto"`, whose platform
+    /// dismissal fires on the opening click's own pointerup.
     #[prop_or(true)]
     pub own_focus: bool,
 
-    /// Called when the portal closes (blur, etc).
     #[prop_or_default]
     pub on_close: Callback<()>,
 
-    pub tag_name: &'static str,
-
-    pub theme: String,
-
-    /// Which popup CSS surface this portal's ShadowRoot adopts.
-    pub surface: StyleSurface,
+    /// The `<perspective-viewer>` to mount under, defaulting to the nearest
+    /// viewer around `target`.
+    #[prop_or_default]
+    pub mount: Option<HtmlElement>,
 }
 
 pub enum PortalModalMsg {
@@ -58,28 +88,49 @@ pub struct PortalModal {
     visible: bool,
     rev_vert: ModalOrientation,
     anchor: Rc<Cell<ModalAnchor>>,
-    _blur_closure: Option<Closure<dyn FnMut(FocusEvent)>>,
+    /// The `own_focus` light-dismiss listeners (document-level, capture),
+    /// present only while the modal is open.
+    _dismiss: Option<DismissHandlers>,
+}
+
+/// The dismiss closures of an open `own_focus` modal: outside `pointerdown`
+/// and Escape `keydown` on the document (capture), `blur` on the host.
+struct DismissHandlers {
+    pointerdown: Closure<dyn FnMut(PointerEvent)>,
+    keydown: Closure<dyn FnMut(KeyboardEvent)>,
+    blur: Closure<dyn FnMut(FocusEvent)>,
 }
 
 impl PortalModal {
-    fn attach_to_body(&self) {
-        if !self.host.is_connected() {
-            let _ = global::body().append_child(&self.host);
+    fn attach(&self, ctx: &Context<Self>, target: &HtmlElement) {
+        if self.host.is_connected() {
+            return;
         }
+
+        let parent = ctx
+            .props()
+            .mount
+            .clone()
+            .or_else(|| nearest_viewer(target))
+            .unwrap_or_else(|| {
+                tracing::warn!(
+                    "`{}` target is outside any <perspective-viewer>; mounting on <body> unthemed",
+                    ctx.props().tag_name
+                );
+
+                global::body()
+            });
+
+        let _ = parent.append_child(&self.host);
+        let _ = self.host.show_popover();
     }
 
-    fn detach_from_body(&mut self) {
+    fn detach(&mut self) {
+        self.remove_dismiss_handlers();
         if self.host.is_connected() {
-            let _ = global::body().remove_child(&self.host);
-        }
-
-        if let Some(closure) = self._blur_closure.as_ref() {
-            self.host
-                .remove_event_listener_with_callback("blur", closure.as_ref().unchecked_ref())
-                .unwrap()
+            let _ = self.host.hide_popover();
+            self.host.remove();
         }
-
-        self._blur_closure = None;
     }
 
     fn position_against_target(&mut self, target: &HtmlElement) {
@@ -90,12 +141,10 @@ impl PortalModal {
         let left = target_rect.left();
 
         if !self.visible {
-            // First pass: position at default anchor, invisible
             self.top = top + height - 1.0;
             self.left = left;
             self.visible = false;
         } else {
-            // Second pass: compute actual anchor and reposition
             let anchor = calc_relative_position(&self.host, top, left, height, width);
             self.anchor.set(anchor);
             let modal_rect = self.host.get_bounding_client_rect();
@@ -104,9 +153,15 @@ impl PortalModal {
             self.left = new_left;
             self.rev_vert.set(anchor.is_rev_vert());
         }
+
+        let style = self.host.style();
+        let _ = style.set_property("top", &format!("{}px", self.top));
+        let _ = style.set_property("left", &format!("{}px", self.left));
     }
 
-    fn setup_blur_handler(&mut self, ctx: &Context<Self>) {
+    /// This component's light-dismiss for `own_focus` modals: an outside
+    /// `pointerdown` (document capture) or Escape.
+    fn setup_dismiss_handlers(&mut self, ctx: &Context<Self>) {
         let on_close = {
             let target = ctx.props().target.clone();
             ctx.props().on_close.reform(move |_| {
@@ -116,15 +171,77 @@ impl PortalModal {
             })
         };
 
-        let closure = Closure::wrap(Box::new(move |_: FocusEvent| {
+        let host = self.host.clone();
+        let pointerdown = Closure::wrap(Box::new({
+            let on_close = on_close.clone();
+            move |event: PointerEvent| {
+                if !event.composed_path().includes(host.as_ref(), 0) {
+                    on_close.emit(());
+                }
+            }
+        }) as Box<dyn FnMut(PointerEvent)>);
+
+        let keydown = Closure::wrap(Box::new({
+            let on_close = on_close.clone();
+            move |event: KeyboardEvent| {
+                if event.key() == "Escape" {
+                    on_close.emit(());
+                }
+            }
+        }) as Box<dyn FnMut(KeyboardEvent)>);
+
+        let blur = Closure::wrap(Box::new(move |_: FocusEvent| {
             on_close.emit(());
         }) as Box<dyn FnMut(FocusEvent)>);
 
         let _ = self
             .host
-            .add_event_listener_with_callback("blur", closure.as_ref().unchecked_ref());
+            .add_event_listener_with_callback("blur", blur.as_ref().unchecked_ref());
 
-        self._blur_closure = Some(closure);
+        let document = global::document();
+        let _ = document.add_event_listener_with_callback_and_bool(
+            "pointerdown",
+            pointerdown.as_ref().unchecked_ref(),
+            true,
+        );
+
+        let _ = document.add_event_listener_with_callback_and_bool(
+            "keydown",
+            keydown.as_ref().unchecked_ref(),
+            true,
+        );
+
+        self._dismiss = Some(DismissHandlers {
+            pointerdown,
+            keydown,
+            blur,
+        });
+    }
+
+    fn remove_dismiss_handlers(&mut self) {
+        if let Some(DismissHandlers {
+            pointerdown,
+            keydown,
+            blur,
+        }) = self._dismiss.take()
+        {
+            let _ = self
+                .host
+                .remove_event_listener_with_callback("blur", blur.as_ref().unchecked_ref());
+
+            let document = global::document();
+            let _ = document.remove_event_listener_with_callback_and_bool(
+                "pointerdown",
+                pointerdown.as_ref().unchecked_ref(),
+                true,
+            );
+
+            let _ = document.remove_event_listener_with_callback_and_bool(
+                "keydown",
+                keydown.as_ref().unchecked_ref(),
+                true,
+            );
+        }
     }
 }
 
@@ -138,8 +255,14 @@ impl Component for PortalModal {
             .unwrap()
             .unchecked_into();
 
-        host.style().set_property("position", "fixed").unwrap();
-        host.style().set_property("z-index", "10000").unwrap();
+        host.set_attribute("popover", "manual").unwrap();
+        host.set_attribute("slot", MODAL_SLOT).unwrap();
+
+        let style = host.style();
+        style.set_property("position", "fixed").unwrap();
+        style.set_property("right", "auto").unwrap();
+        style.set_property("bottom", "auto").unwrap();
+        style.set_property("margin", "0").unwrap();
         let init = ShadowRootInit::new(ShadowRootMode::Open);
         let shadow_root = if let Some(elem) = host.shadow_root() {
             elem
@@ -156,7 +279,7 @@ impl Component for PortalModal {
             visible: false,
             rev_vert: Default::default(),
             anchor: Default::default(),
-            _blur_closure: None,
+            _dismiss: None,
         }
     }
 
@@ -170,32 +293,20 @@ impl Component for PortalModal {
     }
 
     fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
-        // The host element (`tag_name`) and its adopted sheet (`surface`) are
-        // fixed at `create` — a swap at the same vdom position must be keyed
-        // so Yew recreates the component (see `PanelMenu`'s menu→picker
-        // stages).
         debug_assert_eq!(ctx.props().tag_name, old_props.tag_name);
-        debug_assert_eq!(ctx.props().surface, old_props.surface);
-
-        let new_target = &ctx.props().target;
-        let old_target = &old_props.target;
+        debug_assert_eq!(ctx.props().sheet, old_props.sheet);
 
-        match (old_target, new_target, self._blur_closure.as_ref()) {
-            (None, Some(_), Some(closure)) => {
+        match (&old_props.target, &ctx.props().target) {
+            (None, Some(_)) => {
                 self.visible = false;
-                self.host
-                    .remove_event_listener_with_callback("blur", closure.as_ref().unchecked_ref())
-                    .unwrap();
-
-                self._blur_closure = None;
+                self.remove_dismiss_handlers();
             },
-            (None, Some(_), None) => {
-                self.visible = false;
-                self._blur_closure = None;
+            (Some(old), None) => {
+                let _ = old.class_list().remove_1("modal-target");
+                self.detach();
             },
-            (Some(_), None, _) => {
-                self.detach_from_body();
-                return true;
+            (Some(old), Some(new)) if old != new => {
+                let _ = old.class_list().remove_1("modal-target");
             },
             _ => {},
         }
@@ -209,17 +320,13 @@ impl Component for PortalModal {
             return html! {};
         }
 
-        let opacity = if self.visible { "" } else { ";opacity:0" };
-        let css = format!(
-            ":host{{top:{}px;left:{}px{}}}",
-            self.top, self.left, opacity
-        );
+        let css = if self.visible { "" } else { ":host{opacity:0}" };
 
         let portal_content = html! {
             <>
                 <style>{ css }</style>
                 <ContextProvider<ModalOrientation> context={self.rev_vert.clone()}>
-                    <StyleProvider root={self.host.clone()} surface={ctx.props().surface}>
+                    <StyleProvider root={self.host.clone()} sheet={ctx.props().sheet.clone()}>
                         { for ctx.props().children.iter() }
                     </StyleProvider>
                 </ContextProvider<ModalOrientation>>
@@ -234,34 +341,26 @@ impl Component for PortalModal {
             if !self.host.is_connected() {
                 let theme = ctx.props().theme.as_str();
                 self.host.set_attribute("theme", theme).unwrap();
-
-                // First render with a target: attach to body, position invisible
-                self.position_against_target(target);
-                self.attach_to_body();
-
-                // Propagate theme from target
                 if let Some(theme) = target.get_attribute("theme") {
                     let _ = self.host.set_attribute("theme", &theme);
                 }
 
+                self.position_against_target(target);
+                self.attach(ctx, target);
                 target.class_list().add_1("modal-target").unwrap();
-
                 if ctx.props().own_focus {
                     self.host.set_attribute("tabindex", "0").unwrap();
-                    self.setup_blur_handler(ctx);
+                    self.setup_dismiss_handlers(ctx);
                 }
 
-                // Schedule second positioning pass
                 let link = ctx.link().clone();
                 wasm_bindgen_futures::spawn_local(async move {
                     request_animation_frame().await;
                     link.send_message(PortalModalMsg::Reposition);
                 });
             } else if self.visible {
-                // Second pass: reposition with correct anchor
                 self.position_against_target(target);
-
-                if ctx.props().own_focus && self._blur_closure.is_some() {
+                if ctx.props().own_focus && self._dismiss.is_some() {
                     let _ = self.host.focus();
                 }
             }
@@ -271,14 +370,10 @@ impl Component for PortalModal {
     fn destroy(&mut self, ctx: &Context<Self>) {
         if let Some(target) = &ctx.props().target {
             target.class_list().remove_1("modal-target").unwrap();
-            if target.get_attribute("theme").is_some() {
-                let _ = self.host.remove_attribute("theme");
-            }
-
             let event = CustomEvent::new("-perspective-close-expression").unwrap();
             let _ = target.dispatch_event(&event);
         }
 
-        self.detach_from_body();
+        self.detach();
     }
 }

package/src/rust/{components/style/style_provider.rs → ui/style.rs}

@@ -13,42 +13,15 @@
 use wasm_bindgen::{JsCast, JsValue};
 use yew::prelude::*;
 
-use super::surface_sheet;
-
-/// Which prebuilt CSS bundle a [`StyleProvider`] adopts into its root.
-#[derive(Clone, Copy, Debug, PartialEq, Eq, Default)]
-pub enum StyleSurface {
-    /// The `<perspective-viewer>` ShadowRoot.
-    #[default]
-    Viewer,
-    /// Column-name completion dropdown (inverted color scheme).
-    ColumnDropdown,
-    /// Filter-value completion dropdown.
-    FilterDropdown,
-    /// Expression function-completion dropdown.
-    FunctionDropdown,
-    /// Copy / Export menu (non-inverted color scheme).
-    DropdownMenu,
-    /// Panel context menu (right-click a panel).
-    ContextMenu,
-}
-
 #[derive(Properties, PartialEq)]
 pub struct StyleProviderProps {
     pub root: web_sys::HtmlElement,
-
     #[prop_or(true)]
     pub is_shadow: bool,
-
-    #[prop_or_default]
-    pub surface: StyleSurface,
-
+    pub sheet: web_sys::CssStyleSheet,
     pub children: Children,
 }
 
-/// Adopts the build-time CSS bundle for its [`StyleSurface`] into the root's
-/// `adoptedStyleSheets` once, on creation. Unlike the previous per-snippet
-/// `LocalStyle` registration, children no longer register CSS individually.
 pub struct StyleProvider;
 
 impl Component for StyleProvider {
@@ -56,7 +29,7 @@ impl Component for StyleProvider {
     type Properties = StyleProviderProps;
 
     fn create(ctx: &Context<Self>) -> Self {
-        adopt_surface_sheet(ctx.props());
+        adopt_sheet(ctx.props());
         Self
     }
 
@@ -65,9 +38,7 @@ impl Component for StyleProvider {
     }
 }
 
-/// Push the surface's shared stylesheet onto the root's `adoptedStyleSheets`,
-/// unless it is already present (a root may host more than one provider).
-fn adopt_surface_sheet(props: &StyleProviderProps) {
+fn adopt_sheet(props: &StyleProviderProps) {
     let root: JsValue = if props.is_shadow {
         props.root.shadow_root().unwrap().into()
     } else {
@@ -78,8 +49,7 @@ fn adopt_surface_sheet(props: &StyleProviderProps) {
         .unwrap()
         .unchecked_into::<js_sys::Array>();
 
-    let sheet = surface_sheet(props.surface);
-    let sheet_val: &JsValue = sheet.as_ref();
+    let sheet_val: &JsValue = props.sheet.as_ref();
     if sheets.index_of(sheet_val, 0) < 0 {
         sheets.push(sheet_val);
     }

package/src/rust/utils/completion.rs

@@ -15,12 +15,6 @@ use std::future::Future;
 use futures::channel::oneshot;
 use perspective_js::utils::*;
 
-/// A completion handle for message-based public API methods (invariant I6 —
-/// see `SESSION_CONFIG_COHERENCE_PLAN.md`): its ONLY resolution API is
-/// [`Completion::resolve_after`], which takes a run future — so resolving a
-/// public method's promise at message-handling time (before the renders it
-/// caused have drawn) is unwritable, not merely discouraged. Dropping an
-/// unresolved `Completion` rejects the caller as cancelled.
 pub struct Completion(Option<oneshot::Sender<ApiResult<()>>>);
 
 impl Completion {

package/src/rust/{config/css_scale.rs → utils/css.rs}

@@ -12,9 +12,28 @@
 
 use std::collections::BTreeMap;
 
+use serde::{Deserialize, Serialize};
 use serde_json::Value;
 
-use super::{GradientStopSpec, canonicalize_gradient_stops};
+#[derive(Clone, Debug, Deserialize, PartialEq, Serialize)]
+pub struct GradientStopSpec {
+    pub color: String,
+    pub offset: f64,
+}
+
+pub fn canonicalize_gradient_stops(mut stops: Vec<GradientStopSpec>) -> Vec<GradientStopSpec> {
+    for stop in &mut stops {
+        stop.offset = (stop.offset.clamp(0.0, 1.0) * 1000.0).round() / 1000.0;
+    }
+
+    stops.sort_by(|a, b| {
+        a.offset
+            .partial_cmp(&b.offset)
+            .unwrap_or(std::cmp::Ordering::Equal)
+    });
+
+    stops
+}
 
 pub const USER_VAR_PREFIX: &str = "--psp-user--";
 
@@ -64,8 +83,8 @@ impl CssKind {
     }
 }
 
-/// The property name a whole-value `var(--psp-user--…)` reference
-/// names, or `None` when `src` is not one.
+/// The property name a whole-value `var(--psp-user--…)` reference names, or
+/// `None` when `src` is not one.
 pub fn parse_var_ref(src: &str) -> Option<&str> {
     let inner = src.trim().strip_prefix("var(")?.strip_suffix(')')?.trim();
     if !inner.starts_with(USER_VAR_PREFIX)
@@ -129,8 +148,8 @@ fn channel_from_token(token: &str) -> Result<u8, String> {
     Ok(value.round().clamp(0.0, 255.0) as u8)
 }
 
-/// A color literal — `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()`
-/// or `rgba()` — normalized to lowercase `#rrggbb`.
+/// A color literal — `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()` or
+/// `rgba()` — normalized to lowercase `#rrggbb`.
 pub fn normalize_css_color(src: &str) -> Result<String, String> {
     let src = src.trim();
     if let Some(hex) = src.strip_prefix('#') {
@@ -260,8 +279,8 @@ fn format_percent(offset: f64) -> String {
     format!("{text}%")
 }
 
-/// The canonical gradient string for `stops`: `linear-gradient(to
-/// right, #rrggbb P%, …)` with every position explicit.
+/// The canonical gradient string for `stops`: `linear-gradient(to right,
+/// #rrggbb P%, …)` with every position explicit.
 pub fn gradient_to_css(stops: &[GradientStopSpec]) -> String {
     let body = canonicalize_gradient_stops(stops.to_vec())
         .iter()
@@ -272,26 +291,20 @@ pub fn gradient_to_css(stops: &[GradientStopSpec]) -> String {
     format!("linear-gradient(to right, {body})")
 }
 
-/// The canonical palette string for `colors`: `linear-gradient(to
-/// right, #rrggbb, …)` with no positions.
+/// The canonical palette string for `colors`: `linear-gradient(to right,
+/// #rrggbb, …)` with no positions.
 pub fn palette_to_css(colors: &[String]) -> String {
     format!("linear-gradient(to right, {})", colors.join(", "))
 }
 
-/// A serialized [`ControlSpec::GradientStops`] value.
-///
-/// [`ControlSpec::GradientStops`]: super::ControlSpec::GradientStops
+/// A serialized `ControlSpec::GradientStops` value.
 #[derive(Clone, Debug, PartialEq)]
 pub enum CssGradient {
-    /// Canonical stops (sorted, rounded), length ≥ 2.
     Literal(Vec<GradientStopSpec>),
-    /// A `--psp-user--gradient-…` property name.
     Var(String),
 }
 
 impl CssGradient {
-    /// Parse a gradient string of at least 2 stops, with optional
-    /// positions filled by the CSS implicit rules.
     pub fn parse(src: &str) -> Result<Self, String> {
         if let Some(name) = parse_kind_var(src, CssKind::Gradient)? {
             return Ok(CssGradient::Var(name));
@@ -348,20 +361,14 @@ impl CssGradient {
     }
 }
 
-/// A serialized [`ControlSpec::Palette`] value.
-///
-/// [`ControlSpec::Palette`]: super::ControlSpec::Palette
+/// A serialized `ControlSpec::Palette` value.
 #[derive(Clone, Debug, PartialEq)]
 pub enum CssPalette {
-    /// Ordered `#rrggbb` entries, length ≥ 1.
     Literal(Vec<String>),
-    /// A `--psp-user--palette-…` property name.
     Var(String),
 }
 
 impl CssPalette {
-    /// Parse a palette string of at least 1 entry, with positions
-    /// forbidden.
     pub fn parse(src: &str) -> Result<Self, String> {
         if let Some(name) = parse_kind_var(src, CssKind::Palette)? {
             return Ok(CssPalette::Var(name));
@@ -395,14 +402,10 @@ impl CssPalette {
     }
 }
 
-/// A serialized [`ControlSpec::Color`] value.
-///
-/// [`ControlSpec::Color`]: super::ControlSpec::Color
+/// A serialized `ControlSpec::Color` value.
 #[derive(Clone, Debug, PartialEq)]
 pub enum CssColor {
-    /// Lowercase `#rrggbb`.
     Literal(String),
-    /// A `--psp-user--color-…` property name.
     Var(String),
 }
 
@@ -435,8 +438,8 @@ pub fn canonicalize_css_color(src: &str) -> Result<String, String> {
     CssKind::Color.canonicalize(src)
 }
 
-/// One CSS literal stored in a panel's `columns_config`: its column,
-/// key, schema kind and canonical value — the unit of "in use".
+/// One CSS literal stored in a panel's `columns_config`: its column, key,
+/// schema kind and canonical value — the unit of "in use".
 #[derive(Clone, Debug, PartialEq)]
 pub struct CssLiteralUse {
     pub column: String,
@@ -445,8 +448,8 @@ pub struct CssLiteralUse {
     pub literal: String,
 }
 
-/// The workspace palette: `restored` unioned with every in-use
-/// literal, each named deterministically.
+/// The workspace palette: `restored` unioned with every in-use literal, each
+/// named deterministically.
 pub fn assign_palette_names(
     restored: &BTreeMap<String, String>,
     host: &[NamedValue],
@@ -487,9 +490,9 @@ pub fn palette_name_for(
         .map(|(name, _)| name.clone())
 }
 
-/// Replace every whole-value `var(--psp-user--…)` string in one
-/// column's config entry with the literal `lookup` resolves it to,
-/// removing and reporting keys that do not resolve.
+/// Replace every whole-value `var(--psp-user--…)` string in one column's config
+/// entry with the literal `lookup` resolves it to, removing and reporting keys
+/// that do not resolve.
 pub fn resolve_css_refs(
     entry: &mut serde_json::Map<String, Value>,
     lookup: &dyn Fn(&str) -> Option<String>,

package/src/rust/utils/mod.rs

@@ -18,6 +18,7 @@
 
 mod browser;
 mod completion;
+mod css;
 mod css_vars;
 mod custom_element;
 mod datetime;
@@ -36,6 +37,7 @@ mod tests;
 
 pub use browser::*;
 pub use completion::*;
+pub use css::*;
 pub use css_vars::*;
 pub use custom_element::*;
 pub use datetime::*;