@perspective-dev/viewer 4.5.1 → 4.5.2

package/src/rust/components/string_column_style.rs

@@ -13,10 +13,8 @@
 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;
 
 /// Format-only widget for [`String`] columns. Renders the `format` enum
@@ -91,7 +89,6 @@ impl Component for StringColumnStyle {
         let format_mode_changed = ctx.link().callback(StringColumnStyleMsg::FormatChanged);
         html! {
             <>
-                <LocalStyle href={css!("column-style")} />
                 <div id="column-style-container" class="string-column-style-container">
                     <SelectEnumField<FormatMode>
                         label="format"

package/src/rust/components/style/mod.rs

@@ -10,43 +10,76 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-//! A micro-framework for associating local CSS snippets with `yew::Component`s
-//! in a Custom Element's `ShadowRoot`.
+//! Associates a single, build-time CSS bundle with a `yew::Component` tree
+//! rendered into a Custom Element's `ShadowRoot`.
 //!
-//! Embedding a `<LocalStyle>` element will only create the underlying `<style>`
-//! tag once (when `Component::view()` is called the first time), even if
-//! multiple copies of the `Component` exist in the tree.
+//! Each `src/css` file is inlined and minified by `lightningcss` (see
+//! `build.rs` + the `_viewer_bundle.css` and per-popup `_column_dropdown.css`
+//! / `_filter_dropdown.css` / `_function_dropdown.css` / `_dropdown_menu.css`
+//! entrypoints) into one stylesheet per "surface". A `<StyleProvider>` at the
+//! root of a shadow tree adopts its surface's stylesheet exactly once;
+//! constructed `CSSStyleSheet`s are cheap and shared across every viewer
+//! instance.
 //!
 //! # Example
 //!
-//! ```
+//! ```ignore
 //! html! {
-//!     <StyleProvider>
-//!         <LocalStyle href={ css!("my-style") } />
+//!     <StyleProvider root={host} surface={StyleSurface::Viewer}>
 //!         <h1>{ "I am styled!" }</h1>
 //!     </StyleProvider>
 //! }
 //! ```
 
-mod local_style;
-mod style_cache;
 mod style_provider;
 
-pub use local_style::LocalStyle;
-pub use style_provider::StyleProvider;
-
-#[macro_export]
-macro_rules! css {
-    ($name:expr) => {{
-        (
-            $name,
-            include_str!(concat!(env!("OUT_DIR"), "/css/", $name, ".css")),
-        )
-    }};
-    ($path:expr, $name:expr) => {{
-        (
-            $name,
-            include_str!(concat!(env!("OUT_DIR"), "/", $path, "/", $name, ".css")),
-        )
-    }};
+pub use style_provider::{StyleProvider, StyleSurface};
+
+/// The viewer-surface bundle: every `src/css` file except the floating-popup
+/// sheets. Adopted into the `<perspective-viewer>` ShadowRoot.
+fn viewer_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_viewer_bundle.css"))
+}
+
+/// Per-popup-surface bundles. Each floating popup root adopts exactly its own
+/// self-contained sheet (mirroring the pre-bundle behavior where every popup
+/// instance carried only its own CSS) so the four popup styles never collide —
+/// in particular `column-dropdown.css`'s `!important` inverted rules stay
+/// confined to the column-name completion dropdown.
+fn column_dropdown_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_column_dropdown.css"))
+}
+fn filter_dropdown_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_filter_dropdown.css"))
+}
+fn function_dropdown_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_function_dropdown.css"))
+}
+fn dropdown_menu_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_dropdown_menu.css"))
+}
+
+thread_local! {
+    static VIEWER_SHEET: web_sys::CssStyleSheet = make_sheet(viewer_bundle());
+    static COLUMN_DROPDOWN_SHEET: web_sys::CssStyleSheet = make_sheet(column_dropdown_bundle());
+    static FILTER_DROPDOWN_SHEET: web_sys::CssStyleSheet = make_sheet(filter_dropdown_bundle());
+    static FUNCTION_DROPDOWN_SHEET: web_sys::CssStyleSheet = make_sheet(function_dropdown_bundle());
+    static DROPDOWN_MENU_SHEET: web_sys::CssStyleSheet = make_sheet(dropdown_menu_bundle());
+}
+
+fn make_sheet(css: &str) -> web_sys::CssStyleSheet {
+    let sheet = web_sys::CssStyleSheet::new().unwrap();
+    sheet.replace_sync(css).unwrap();
+    sheet
+}
+
+/// The memoized, shared `CSSStyleSheet` for a given [`StyleSurface`].
+pub(crate) fn surface_sheet(surface: StyleSurface) -> web_sys::CssStyleSheet {
+    match surface {
+        StyleSurface::Viewer => VIEWER_SHEET.with(|x| x.clone()),
+        StyleSurface::ColumnDropdown => COLUMN_DROPDOWN_SHEET.with(|x| x.clone()),
+        StyleSurface::FilterDropdown => FILTER_DROPDOWN_SHEET.with(|x| x.clone()),
+        StyleSurface::FunctionDropdown => FUNCTION_DROPDOWN_SHEET.with(|x| x.clone()),
+        StyleSurface::DropdownMenu => DROPDOWN_MENU_SHEET.with(|x| x.clone()),
+    }
 }

package/src/rust/components/style/style_provider.rs

@@ -10,9 +10,26 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+use wasm_bindgen::{JsCast, JsValue};
 use yew::prelude::*;
 
-use super::style_cache::StyleCache;
+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,
+}
 
 #[derive(Properties, PartialEq)]
 pub struct StyleProviderProps {
@@ -20,32 +37,48 @@ pub struct StyleProviderProps {
 
     #[prop_or(true)]
     pub is_shadow: bool,
+
+    #[prop_or_default]
+    pub surface: StyleSurface,
+
     pub children: Children,
 }
 
-/// A context which injects any CSS snippet registered within its tree, doing
-/// so only once for each unqiue snippet name.
-///
-/// CSS can be registered within sub-components via the `<LocalStyle>` component
-/// and `css!()` resource inlining macro.
-pub struct StyleProvider {
-    cache: StyleCache,
-}
+/// 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 {
     type Message = ();
     type Properties = StyleProviderProps;
 
     fn create(ctx: &Context<Self>) -> Self {
-        let cache = StyleCache::new(ctx.props().is_shadow, &ctx.props().root);
-        Self { cache }
+        adopt_surface_sheet(ctx.props());
+        Self
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        html! {
-            <ContextProvider<StyleCache> context={self.cache.clone()}>
-                { for ctx.props().children.iter() }
-            </ContextProvider<StyleCache>>
-        }
+        html! { <>{ for ctx.props().children.iter() }</> }
+    }
+}
+
+/// 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) {
+    let root: JsValue = if props.is_shadow {
+        props.root.shadow_root().unwrap().into()
+    } else {
+        web_sys::window().unwrap().document().unwrap().into()
+    };
+
+    let sheets = js_sys::Reflect::get(&root, &"adoptedStyleSheets".into())
+        .unwrap()
+        .unchecked_into::<js_sys::Array>();
+
+    let sheet = surface_sheet(props.surface);
+    let sheet_val: &JsValue = sheet.as_ref();
+    if sheets.index_of(sheet_val, 0) < 0 {
+        sheets.push(sheet_val);
     }
 }

package/src/rust/components/style_controls/number_string_format.rs

@@ -19,9 +19,7 @@ use perspective_client::config::ColumnType;
 pub use types::*;
 use yew::{Callback, Component, Properties, html};
 
-use crate::components::style::LocalStyle;
 use crate::config::*;
-use crate::css;
 
 #[derive(Properties, PartialEq, Clone)]
 pub struct CustomNumberFormatProps {
@@ -211,12 +209,7 @@ impl Component for CustomNumberFormat {
 
     fn view(&self, ctx: &yew::prelude::Context<Self>) -> yew::prelude::Html {
         html! {
-            <>
-                <LocalStyle href={css!("column-style")} />
-                { self.style_section(ctx) }
-                { self.digits_section(ctx) }
-                { self.misc_section(ctx) }
-            </>
+            <>{ self.style_section(ctx) }{ self.digits_section(ctx) }{ self.misc_section(ctx) }</>
         }
     }
 }

package/src/rust/components/type_icon.rs

@@ -14,9 +14,6 @@ use perspective_client::config::ColumnType;
 use yew::html::IntoPropValue;
 use yew::{Properties, classes, function_component, html};
 
-use crate::components::style::LocalStyle;
-use crate::css;
-
 #[derive(PartialEq, Debug, Clone, Copy)]
 pub enum TypeIconType {
     Type(ColumnType),
@@ -31,7 +28,7 @@ pub struct TypeIconProps {
 #[function_component(TypeIcon)]
 pub fn type_icon(p: &TypeIconProps) -> yew::Html {
     let class = classes!(p.ty.to_string(), "type-icon");
-    html! { <><LocalStyle href={css!("type-icon")} /><span {class} /></> }
+    html! { <><span {class} /></> }
 }
 
 impl From<ColumnType> for TypeIconType {

package/src/rust/components/viewer.rs

@@ -21,12 +21,11 @@ use yew::prelude::*;
 
 use super::containers::split_panel::SplitPanel;
 use super::font_loader::{FontLoader, FontLoaderProps, FontLoaderStatus};
-use super::style::{LocalStyle, StyleProvider};
+use super::style::StyleProvider;
 use crate::components::column_settings_sidebar::ColumnSettingsPanel;
 use crate::components::main_panel::MainPanel;
 use crate::components::settings_panel::{SelectedTab, SettingsPanel};
 use crate::config::*;
-use crate::css;
 use crate::js::JsPerspectiveViewerPlugin;
 use crate::presentation::{
     ColumnLocator, ColumnSettingsTab, DragDropProps, Presentation, PresentationProps,
@@ -608,7 +607,6 @@ impl Component for PerspectiveViewer {
 
         html! {
             <StyleProvider root={ctx.props().elem.clone()}>
-                <LocalStyle href={css!("viewer")} />
                 <div id="component_container">
                     if is_settings_open {
                         <SplitPanel

package/src/rust/custom_elements/copy_dropdown.rs

@@ -22,7 +22,7 @@ use yew::prelude::*;
 use super::viewer::PerspectiveViewerElement;
 use crate::components::copy_dropdown::CopyDropDownMenu;
 use crate::components::portal::PortalModal;
-use crate::components::style::StyleProvider;
+use crate::components::style::{StyleProvider, StyleSurface};
 use crate::config::*;
 use crate::js::*;
 use crate::presentation::Presentation;
@@ -77,9 +77,13 @@ impl Component for CopyDropDownWrapper {
     fn view(&self, ctx: &Context<Self>) -> Html {
         let on_close = ctx.link().callback(|_| CopyDropDownWrapperMsg::Close);
         html! {
-            <StyleProvider root={ctx.props().custom_element.clone()}>
+            <StyleProvider
+                root={ctx.props().custom_element.clone()}
+                surface={StyleSurface::DropdownMenu}
+            >
                 <PortalModal
                     tag_name="perspective-copy-menu"
+                    surface={StyleSurface::DropdownMenu}
                     target={self.target.clone()}
                     own_focus=true
                     {on_close}

package/src/rust/custom_elements/export_dropdown.rs

@@ -22,7 +22,7 @@ use yew::prelude::*;
 use super::viewer::PerspectiveViewerElement;
 use crate::components::export_dropdown::ExportDropDownMenu;
 use crate::components::portal::PortalModal;
-use crate::components::style::StyleProvider;
+use crate::components::style::{StyleProvider, StyleSurface};
 use crate::config::*;
 use crate::presentation::Presentation;
 use crate::renderer::*;
@@ -77,9 +77,13 @@ impl Component for ExportDropDownWrapper {
     fn view(&self, ctx: &Context<Self>) -> Html {
         let on_close = ctx.link().callback(|_| ExportDropDownWrapperMsg::Close);
         html! {
-            <StyleProvider root={ctx.props().custom_element.clone()}>
+            <StyleProvider
+                root={ctx.props().custom_element.clone()}
+                surface={StyleSurface::DropdownMenu}
+            >
                 <PortalModal
                     tag_name="perspective-export-menu"
+                    surface={StyleSurface::DropdownMenu}
                     target={self.target.clone()}
                     own_focus=true
                     {on_close}

package/src/rust/lib.rs

@@ -20,7 +20,6 @@
 #![feature(stmt_expr_attributes)]
 #![feature(try_blocks)]
 #![allow(async_fn_in_trait)]
-#![feature(more_qualified_paths)]
 #![warn(
     clippy::all,
     clippy::panic_in_result_fn,

package/src/rust/renderer.rs

@@ -544,6 +544,16 @@ impl Renderer {
             .and_then(|idx| names.get(idx))
             .map(|s| s.as_str());
 
+        // If the view schema itself hasn't been built yet (e.g. restore
+        // landed before `create_view` populated `view_schema`), refuse
+        // to answer rather than returning an empty schema. The strip
+        // pass in `update_columns_configs` treats `Err` as "leave the
+        // incoming cfg untouched"; an empty schema, by contrast, would
+        // cause `cfg.retain(|k, _| active.contains(k))` to drop every
+        // key and zero out user-supplied column config.
+        if !session.metadata().has_view_schema() {
+            return Err(JsValue::from("view_schema not initialized").into());
+        }
         let Some(view_type) = session.metadata().get_column_view_type(column_name) else {
             return Ok(ColumnConfigSchema { fields: vec![] });
         };
@@ -1040,7 +1050,7 @@ impl Renderer {
             }),
         ];
 
-        let (x, _, y) = select_all(tasks.into_iter()).await;
+        let (x, _, y) = select_all(tasks).await;
         x.ok_or_else(|| y.into_iter().next().unwrap())
     }
 
@@ -1048,8 +1058,8 @@ impl Renderer {
     async fn resize_with_explicit_dimensions(&self) -> TaskResult {
         let plugin = self.get_active_plugin()?;
         let main_panel: &web_sys::HtmlElement = plugin.unchecked_ref();
-        let new_width = format!("{}px", &self.0.borrow().viewer_elem.client_width());
-        let new_height = format!("{}px", &self.0.borrow().viewer_elem.client_height());
+        let new_width = format!("{}px", self.0.borrow().viewer_elem.client_width());
+        let new_height = format!("{}px", self.0.borrow().viewer_elem.client_height());
         main_panel.style().set_property("width", &new_width)?;
         main_panel.style().set_property("height", &new_height)?;
         let result = plugin.resize().await;

package/src/rust/session/metadata.rs

@@ -95,6 +95,16 @@ impl SessionMetadata {
         Ok(())
     }
 
+    /// Whether `view_schema` has been populated by a prior successful
+    /// `create_view`. Used by `Session::create_view` to force a full
+    /// build on first run even when `is_clean` happens to be true, so
+    /// that downstream consumers (`query_column_config_schema`,
+    /// strip-on-write in `update_columns_configs`) always see a real
+    /// view schema rather than `None`.
+    pub fn has_view_schema(&self) -> bool {
+        self.as_ref().and_then(|s| s.view_schema.as_ref()).is_some()
+    }
+
     pub(super) fn update_expressions(
         &mut self,
         valid_recs: &perspective_client::ExprValidationResult,
@@ -302,7 +312,7 @@ impl SessionMetadata {
                     Some(
                         self.get_expression_columns()
                             .cloned()
-                            .chain(self.get_table_columns()?.clone().into_iter())
+                            .chain(self.get_table_columns()?.clone())
                             .map(move |name| {
                                 self.get_column_table_type(&name)
                                     .map(|coltype| (name, coltype))

package/src/rust/session.rs

@@ -760,7 +760,20 @@ impl ValidSession<'_> {
     /// `update()` subscription, consuming this `ValidSession<'_>` and returning
     /// the original `&Session`.
     pub async fn create_view(&self) -> Result<Option<View>, ApiError> {
-        if !self.0.reset_clean() && !self.0.borrow().is_paused {
+        // Always consume `is_clean` to preserve the "mark up-to-date"
+        // contract of `reset_clean`. Force a full build if no view
+        // schema has been built yet — `query_column_config_schema` (and
+        // downstream `update_columns_configs`) needs a populated
+        // `view_schema` to avoid destructively stripping every key from
+        // incoming `columns_config` payloads. Without this fallback, a
+        // first restore that lands with `is_clean = true` (e.g., when a
+        // prior validate already consumed the flag) would skip the
+        // view-schema-building inner block, leaving the schema empty
+        // and causing strip-on-write to silently zero out
+        // user-supplied column config.
+        let was_clean = self.0.reset_clean();
+        let needs_schema = !self.0.metadata().has_view_schema();
+        if (!was_clean && !self.0.borrow().is_paused) || needs_schema {
             if !self.1 {
                 let config = self.0.borrow().config.clone();
                 if let Some(sub) = &mut self.0.borrow_mut().view_sub.as_mut() {

package/src/themes/botanical.css

@@ -33,6 +33,7 @@ perspective-viewer[theme="Botanical"] {
     --psp-expression--function--color: #7bc96f;
     --psp-expression--psp-error--color: rgb(232, 131, 106);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #1a2e1a;
     --psp-warning--background: var(--psp--color);
 
@@ -110,6 +111,7 @@ perspective-string-column-style[theme="Botanical"] {
     --psp-expression--function--color: #7bc96f;
     --psp-expression--psp-error--color: rgb(232, 131, 106);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #1a2e1a;
     --psp-warning--background: var(--psp--color);
 

package/src/themes/dracula.css

@@ -32,6 +32,7 @@ perspective-viewer[theme="Dracula"] {
     --psp-expression--function--color: #22a0ce;
     --psp-expression--psp-error--color: rgb(255, 136, 136);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #242526;
     --psp-warning--background: var(--psp--color);
 
@@ -170,6 +171,7 @@ perspective-dropdown[theme="Dracula"] {
     --psp-expression--function--color: #22a0ce;
     --psp-expression--psp-error--color: rgb(255, 136, 136);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #242526;
     --psp-warning--background: var(--psp--color);
     --psp-icon--select-arrow--mask-image: var(

package/src/themes/gruvbox-dark.css

@@ -32,6 +32,7 @@ perspective-viewer[theme="Gruvbox Dark"] {
     --psp-expression--function--color: #22a0ce;
     --psp-expression--psp-error--color: rgb(255, 136, 136);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #242526;
     --psp-warning--background: var(--psp--color);
 
@@ -183,6 +184,7 @@ perspective-dropdown[theme="Gruvbox Dark"] {
     --psp-expression--function--color: #22a0ce;
     --psp-expression--psp-error--color: rgb(255, 136, 136);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #242526;
     --psp-warning--background: var(--psp--color);
     --psp-icon--select-arrow--mask-image: var(

package/src/themes/monokai.css

@@ -32,6 +32,7 @@ perspective-viewer[theme="Monokai"] {
     --psp-expression--function--color: #22a0ce;
     --psp-expression--psp-error--color: rgb(255, 136, 136);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #242526;
     --psp-warning--background: var(--psp--color);
 
@@ -183,6 +184,7 @@ perspective-string-column-style[theme="Monokai"] {
     --psp-expression--function--color: #22a0ce;
     --psp-expression--psp-error--color: rgb(255, 136, 136);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #242526;
     --psp-warning--background: var(--psp--color);
     --psp-icon--select-arrow--mask-image: var(

package/src/themes/phosphor.css

@@ -43,6 +43,7 @@ perspective-viewer[theme="Phosphor"] {
     --psp-expression--function--color: var(--theme-green-bright);
     --psp-expression--psp-error--color: var(--theme-red);
     --psp-calendar--filter: invert(1) hue-rotate(70deg);
+    --psp-input--filter: invert(1) hue-rotate(70deg);
     --psp-warning--color: var(--theme-bg0);
     --psp-warning--background: var(--theme-amber);
 
@@ -153,6 +154,7 @@ perspective-string-column-style[theme="Phosphor"] {
     --psp-expression--function--color: var(--theme-green-bright);
     --psp-expression--psp-error--color: var(--theme-red);
     --psp-calendar--filter: invert(1) hue-rotate(70deg);
+    --psp-input--filter: invert(1) hue-rotate(70deg);
     --psp-warning--color: var(--theme-bg0);
     --psp-warning--background: var(--theme-amber);
     --psp-icon--select-arrow--mask-image: var(

package/src/themes/pro-dark.css

@@ -33,6 +33,7 @@ perspective-viewer[theme="Pro Dark"] {
     --psp-expression--function--color: #22a0ce;
     --psp-expression--error--color: rgb(255, 136, 136);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #242526;
     --psp-warning--background: var(--psp--color);
 
@@ -127,6 +128,7 @@ perspective-string-column-style[theme="Pro Dark"] {
     --psp-expression--function--color: #22a0ce;
     --psp-expression--error--color: rgb(255, 136, 136);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #242526;
     --psp-warning--background: var(--psp--color);
 

package/src/themes/vaporwave.css

@@ -32,6 +32,7 @@ perspective-viewer[theme="Vaporwave"] {
     --psp-expression--function--color: #22a0ce;
     --psp-expression--psp-error--color: rgb(255, 136, 136);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #242526;
     --psp-warning--background: var(--psp--color);
 
@@ -195,6 +196,7 @@ perspective-string-column-style[theme="Vaporwave"] {
     --psp-expression--function--color: #22a0ce;
     --psp-expression--psp-error--color: rgb(255, 136, 136);
     --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
     --psp-warning--color: #242526;
     --psp-warning--background: var(--psp--color);
     --psp-icon--select-arrow--mask-image: var(

package/tsconfig.json

@@ -12,5 +12,5 @@
         "allowImportingTsExtensions": true,
         "typeRoots": ["./node_modules/@types"]
     },
-    "files": ["src/ts/perspective-viewer.ts"]
+    "include": ["./src/ts/**/*"]
 }