@perspective-dev/viewer 4.5.0 → 4.5.2

package/src/{rust/components/style/local_style.rs → css/_column_dropdown.css}

@@ -1,35 +1,14 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-use yew::prelude::*;
-
-use super::style_cache::*;
-
-#[derive(Properties)]
-pub struct LocalStyleProps {
-    pub href: (&'static str, &'static str),
-}
-
-impl PartialEq for LocalStyleProps {
-    fn eq(&self, _other: &Self) -> bool {
-        true
-    }
-}
-
-#[function_component(LocalStyle)]
-pub fn local_style(props: &LocalStyleProps) -> Html {
-    if let Some(cache) = use_context::<StyleCache>() {
-        cache.add_style(props.href.0, props.href.1);
-    }
-
-    html! {}
-}
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+@import "column-dropdown.css";

package/src/css/_dropdown_menu.css

@@ -0,0 +1,14 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+@import "containers/dropdown-menu.css";

package/src/css/_filter_dropdown.css

@@ -0,0 +1,14 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+@import "filter-dropdown.css";

package/src/css/_function_dropdown.css

@@ -0,0 +1,14 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+@import "function-dropdown.css";

package/src/css/_viewer_bundle.css

@@ -0,0 +1,41 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+@import "dom/checkbox.css";
+@import "dom/scrollbar.css";
+@import "dom/select.css";
+
+@import "containers/split-panel.css";
+@import "containers/scroll-panel.css";
+@import "containers/pairs-list.css";
+@import "containers/tabs.css";
+
+@import "type-icon.css";
+@import "aggregate-selector.css";
+@import "empty-column.css";
+@import "filter-item.css";
+@import "config-selector.css";
+@import "column-selector.css";
+@import "column-style.css";
+@import "column-symbol-attributes.css";
+@import "column-settings-panel.css";
+@import "expression-editor.css";
+@import "plugin-selector.css";
+@import "plugin-settings-panel.css";
+@import "render-warning.css";
+@import "status-bar.css";
+
+@import "form/code-editor.css";
+@import "form/debug.css";
+
+@import "viewer.css";

package/src/css/column-settings-panel.css

@@ -75,20 +75,22 @@
             border-radius: 3px;
             outline-width: 1px;
             outline-color: var(--psp-inactive--color);
+            padding-left: 4px;
 
             &.editable {
+                outline-style: dashed;
                 &:hover {
                     outline-style: solid;
                     cursor: text;
                 }
             }
-            &:focus {
+            &.editable:focus {
                 outline-style: solid;
                 background: var(--psp--background-color);
             }
-            &.edited {
+            /* &.edited {
                 outline-style: dashed;
-            }
+            } */
             &.invalid {
                 outline-color: var(--psp-error--color);
             }
@@ -164,6 +166,10 @@
         content: var(--psp-label--stack--content, "Stack");
     }
 
+    label#interpolate-label:before {
+        content: var(--psp-label--interpolate--content, "Interpolate null");
+    }
+
     label#series-label:before {
         content: var(--psp-label--series--content, "Series");
     }

package/src/css/column-style.css

@@ -27,14 +27,22 @@
             margin: 0px;
         }
 
+        .is-default-value .bool-field-container {
+            background-color: var(--psp--background-color);
+            border: 1px solid var(--psp-inactive--color);
+        }
+
         .bool-field-container {
             display: flex;
-            border: 1px solid var(--psp-inactive--color);
+            border: 1px dashed var(--psp-inactive--color);
             border-radius: 3px;
             align-items: center;
             padding: 0 6px;
             width: 100%;
             cursor: pointer;
+            label {
+                cursor: pointer;
+            }
         }
 
         &.no-style {

package/src/css/dom/checkbox.css

@@ -19,7 +19,7 @@
         padding: 0px;
         cursor: pointer;
         outline: none;
-        margin: 0 5px;
+        margin: 0;
         display: inline-block;
         background-repeat: no-repeat;
         background-color: var(--psp--color, #ccc);
@@ -86,7 +86,7 @@
             opacity: 0.2s;
         }
 
-        &:hover {
+        &:not(.alternate):hover {
             -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image);
             mask-image: var(--psp-icon--checkbox-hover--mask-image);
         }

package/src/css/viewer.css

@@ -16,10 +16,88 @@
     --psp--color: #ff0000;
 }
 
+/* Shift-key affordance: while the user holds Shift, any mask-image icon
+ * tagged `.shift-alt-icon` recolors to advertise that a Shift-modified
+ * action is available on the underlying control. `!important` is required
+ * to beat per-icon ID-scoped `background-color` rules. */
+:host(.shift-active) .shift-alt-icon {
+    background-color: var(
+        --shift-active--color,
+        var(--psp-datagrid--pos-cell--color, #1078d1)
+    ) !important;
+}
+
+:host(.shift-active) {
+    #sub-columns {
+        .is_column_active.toggle-mode {
+            -webkit-mask-image: var(--psp-icon--radio-off--mask-image);
+            mask-image: var(--psp-icon--radio-off--mask-image);
+
+            &:before {
+                content: var(--psp-icon--radio-off--mask-image);
+            }
+
+            &:hover {
+                -webkit-mask-image: var(--psp-icon--radio-hover--mask-image);
+                mask-image: var(--psp-icon--radio-hover--mask-image);
+            }
+        }
+
+        .is_column_active.select-mode {
+            -webkit-mask-image: var(--psp-icon--checkbox-off--mask-image);
+            mask-image: var(--psp-icon--checkbox-off--mask-image);
+
+            &:before {
+                content: var(--psp-icon--checkbox-off--mask-image);
+            }
+
+            &:hover {
+                -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image);
+                mask-image: var(--psp-icon--checkbox-hover--mask-image);
+            }
+        }
+    }
+
+    #active-columns {
+        .is_column_active.toggle-mode {
+            -webkit-mask-image: var(--psp-icon--radio-on--mask-image);
+            mask-image: var(--psp-icon--radio-on--mask-image);
+
+            &:before {
+                content: var(--psp-icon--radio-on--mask-image);
+            }
+
+            &:not(.required):hover {
+                -webkit-mask-image: var(--psp-icon--radio-hover--mask-image);
+                mask-image: var(--psp-icon--radio-hover--mask-image);
+            }
+        }
+
+        .is_column_active.select-mode {
+            -webkit-mask-image: var(--psp-icon--checkbox-on--mask-image);
+            mask-image: var(--psp-icon--checkbox-on--mask-image);
+
+            &:before {
+                content: var(--psp-icon--checkbox-on--mask-image);
+            }
+
+            &:not(.required):hover {
+                -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image);
+                mask-image: var(--psp-icon--checkbox-hover--mask-image);
+            }
+        }
+    }
+}
+
 ::slotted(*) {
     pointer-events: var(--override-content-pointer-events);
 }
 
+:host input[type="number"]::-webkit-inner-spin-button {
+    transform: scale(1.5) translateX(-5px); /* Makes the arrows 50% larger */
+    filter: var(--psp-input--filter);
+}
+
 :host .sidebar_close_button {
     position: absolute;
     top: 0;
@@ -398,13 +476,13 @@
             cursor: pointer;
             padding: 6px 8px;
             font-size: var(--label--font-size, 0.75em);
+            text-transform: uppercase;
             flex: 0 1 100px;
             background-color: #00000020;
             border-bottom: 1px solid var(--psp-inactive--color);
             color: var(--psp-inactive--color);
             margin-left: -1px;
             border-left: 1px solid var(--psp-inactive--color);
-
             &:hover {
                 color: inherit;
             }

package/src/rust/components/column_dropdown.rs

@@ -22,12 +22,11 @@ use yew::prelude::*;
 
 use super::column_selector::InPlaceColumn;
 use super::portal::PortalModal;
+use super::style::StyleSurface;
 use crate::session::Session;
 use crate::utils::*;
 use crate::*;
 
-static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/column-dropdown.css"));
-
 /// Shared state for the column dropdown, updated imperatively.
 #[derive(Default)]
 pub struct ColumnDropDownState {
@@ -207,6 +206,7 @@ impl Component for ColumnDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
+                    surface={StyleSurface::ColumnDropdown}
                     {target}
                     own_focus=false
                     {on_close}
@@ -270,5 +270,5 @@ fn ColumnDropDownView(props: &ColumnDropDownViewProps) -> Html {
         props.width, props.width
     );
 
-    html! { <><style>{ CSS }</style><style>{ position }</style>{ body }</> }
+    html! { <><style>{ position }</style>{ body }</> }
 }

package/src/rust/components/column_selector/active_column.rs

@@ -355,6 +355,9 @@ impl Component for ActiveColumn {
                 if is_required {
                     class.push("required");
                 };
+                if !is_required {
+                    class.push("shift-alt-icon");
+                }
                 html! {
                     <div
                         class={outer_classes}

package/src/rust/components/column_selector/aggregate_selector.rs

@@ -18,8 +18,6 @@ use perspective_js::utils::ApiFuture;
 use yew::prelude::*;
 
 use crate::components::containers::select::*;
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::PtrEqRc;
@@ -119,7 +117,6 @@ impl Component for AggregateSelector {
 
         html! {
             <>
-                <LocalStyle href={css!("aggregate-selector")} />
                 <div class="aggregate-selector-wrapper">
                     <Select<Aggregate>
                         wrapper_class="aggregate-selector"

package/src/rust/components/column_selector/config_selector.rs

@@ -25,8 +25,6 @@ use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPo
 use crate::components::containers::dragdrop_list::*;
 use crate::components::containers::select::{Select, SelectItem};
 use crate::components::filter_dropdown::{FilterDropDownElement, FilterDropDownPortal};
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::drag_drop_update::*;
@@ -609,7 +607,6 @@ impl Component for ConfigSelector {
         html! {
             <>
                 <div slot="top_panel" id="top_panel" {class} ondragend={dragend}>
-                    <LocalStyle href={css!("config-selector")} />
                     <div class="pivot_controls">
                         if group_rollups.len() > 1 {
                             <Select<GroupRollupMode>

package/src/rust/components/column_selector/empty_column.rs

@@ -17,8 +17,6 @@ use web_sys::*;
 use yew::prelude::*;
 
 use crate::components::column_dropdown::ColumnDropDownElement;
-use crate::components::style::LocalStyle;
-use crate::css;
 
 #[derive(Properties)]
 pub struct EmptyColumnProps {
@@ -70,7 +68,6 @@ impl Component for EmptyColumn {
 
         html! {
             <div class="pivot-column column-empty">
-                <LocalStyle href={css!("empty-column")} />
                 <input
                     spellcheck="false"
                     ref={self.input_ref.clone()}

package/src/rust/components/column_selector/filter_column.rs

@@ -23,9 +23,7 @@ use yew::prelude::*;
 use crate::components::containers::dragdrop_list::*;
 use crate::components::containers::select::*;
 use crate::components::filter_dropdown::FilterDropDownElement;
-use crate::components::style::LocalStyle;
 use crate::components::type_icon::TypeIcon;
-use crate::css;
 use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::*;
@@ -348,7 +346,6 @@ impl Component for FilterColumn {
                 ondragstart={dragstart}
                 ondragend={dragend}
             >
-                <LocalStyle href={css!("filter-item")} />
                 <div class="pivot-column-border">
                     <span class="drag-handle icon" />
                     // <TypeIcon ty={ColumnType::String} />

package/src/rust/components/column_selector/inactive_column.rs

@@ -149,7 +149,8 @@ impl Component for InactiveColumn {
 
         let is_expression = ctx.props().is_expression;
 
-        let is_active_class = ctx.props().renderer.metadata().select_mode.css();
+        let mut is_active_class = ctx.props().renderer.metadata().select_mode.css();
+        is_active_class.push("shift-alt-icon");
         let mut class = classes!("column-selector-column");
         if !ctx.props().visible {
             class.push("column-selector-column-hidden");

package/src/rust/components/column_selector/invalid_column.rs

@@ -12,14 +12,10 @@
 
 use yew::prelude::*;
 
-use crate::components::style::LocalStyle;
-use crate::css;
-
 #[function_component(InvalidColumn)]
 pub fn invalid_column() -> Html {
     html! {
         <div class="pivot-column column-empty column-invalid">
-            <LocalStyle href={css!("empty-column")} />
             <div class="column-invalid-input" />
         </div>
     }

package/src/rust/components/column_selector.rs

@@ -39,10 +39,8 @@ use self::config_selector::ConfigSelector;
 use self::inactive_column::*;
 use super::containers::scroll_panel::*;
 use super::containers::split_panel::{Orientation, SplitPanel};
-use super::style::LocalStyle;
 use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPortal};
 use crate::components::containers::scroll_panel_item::ScrollPanelItem;
-use crate::css;
 use crate::presentation::{ColumnLocator, DragDropContainer, Presentation};
 use crate::queries::{ActiveColumnState, ActiveColumnStateData, ColumnsIteratorSet};
 use crate::renderer::*;
@@ -519,7 +517,6 @@ impl Component for ColumnSelector {
 
         html! {
             <>
-                <LocalStyle href={css!("column-selector")} />
                 <SplitPanel
                     no_wrap=true
                     on_reset={self.on_reset.callback()}

package/src/rust/components/column_settings_sidebar/style_tab/primitive_field.rs

@@ -160,6 +160,7 @@ pub fn BoolField(props: &BoolFieldProps) -> Html {
                 <div class="bool-field-container">
                     <input
                         type="checkbox"
+                        class="alternate"
                         id={format!("{}-checkbox", props.field_key)}
                         checked={current}
                         {oninput}

package/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_pairs.rs

@@ -17,9 +17,7 @@ use yew::{Callback, Html, Properties, html};
 
 use crate::components::column_settings_sidebar::style_tab::symbol::symbol_pairs_item::PairsListItem;
 use crate::components::filter_dropdown::FilterDropDownElement;
-use crate::components::style::LocalStyle;
 use crate::config::SymbolKVPair;
-use crate::css;
 use crate::utils::PtrEqRc;
 
 #[derive(Properties, PartialEq)]
@@ -84,7 +82,6 @@ impl yew::Component for PairsList {
 
         html! {
             <>
-                <LocalStyle href={css!("containers/pairs-list")} />
                 <div class="pairs-list" id={props.id.clone()} data-label={props.title.clone()}>
                     <ul>{ for main_pairs }</ul>
                 </div>

package/src/rust/components/column_settings_sidebar/style_tab/symbol.rs

@@ -24,9 +24,7 @@ use yew::{Callback, Html, Properties, html};
 
 use crate::components::column_settings_sidebar::style_tab::symbol::symbol_pairs::PairsList;
 use crate::components::filter_dropdown::{FilterDropDownElement, FilterDropDownPortal};
-use crate::components::style::LocalStyle;
 use crate::config::{ColumnConfigFieldUpdate, KeyValueOpts, SymbolKVPair};
-use crate::css;
 use crate::session::Session;
 
 #[derive(Properties, PartialEq, Clone)]
@@ -126,7 +124,6 @@ impl yew::Component for SymbolStyle {
         let update_pairs = ctx.link().callback(SymbolAttrMsg::UpdatePairs);
         html! {
             <>
-                <LocalStyle href={css!("column-symbol-attributes")} />
                 <PairsList
                     title="Symbols"
                     id="attributes-symbols"

package/src/rust/components/column_settings_sidebar.rs

@@ -31,14 +31,12 @@ 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::style::LocalStyle;
 use crate::components::type_icon::TypeIconType;
 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::utils::PtrEqRc;
-use crate::*;
 
 #[derive(Clone, Derivative, Properties)]
 #[derivative(Debug)]
@@ -264,6 +262,7 @@ impl Component for ColumnSettingsPanel {
                     ctx.props().selected_tab,
                     Some(ColumnSettingsTab::Attributes)
                 ),
+            update_on_input: true,
             icon_type: self
                 .maybe_ty
                 .map(|ty| ty.into())
@@ -355,7 +354,6 @@ impl Component for ColumnSettingsPanel {
 
         html! {
             <>
-                <LocalStyle href={css!("column-settings-panel")} />
                 <Sidebar
                     on_close={ctx.props().on_close.clone()}
                     id_prefix="column_settings"

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

@@ -193,6 +193,12 @@ where
             }
         });
 
+        // Held by per-row `ondragenter` closures below so they can re-arm
+        // the `safaridragleave` flag on the container element when the
+        // row stops dragenter from bubbling. See the comment inside the
+        // closure for why this matters.
+        let container_noderef = drag_container.noderef.clone();
+
         let invalid_drag: bool;
         let mut valid_duplicate_drag = false;
 
@@ -253,9 +259,30 @@ where
                     let close = ctx.props().parent.callback(move |_| V::close(idx));
                     let dragenter = ctx.props().parent.callback({
                         let link = ctx.link().clone();
+                        let container_noderef = container_noderef.clone();
                         move |event: DragEvent| {
                             event.stop_propagation();
                             event.prevent_default();
+                            // Safari: `relatedTarget` is always null on
+                            // dragleave, so `dragleave_helper` uses a
+                            // `data-safaridragleave` flag set by the
+                            // container's own dragenter to distinguish
+                            // child-crossing leaves (consume the flag)
+                            // from real leaves (no flag → fire callback).
+                            // The `stop_propagation` above blocks the
+                            // container's dragenter, so the flag would
+                            // never be re-armed after the first consume —
+                            // any further internal boundary crossing
+                            // would demote the state out of
+                            // `DragOverInProgress` and the next drop
+                            // would be silently rejected. Set the flag
+                            // here so each row-targeted dragenter
+                            // refills the pool.
+                            if event.related_target().is_none()
+                                && let Some(elem) = container_noderef.cast::<HtmlElement>()
+                            {
+                                let _ = elem.dataset().set("safaridragleave", "true");
+                            }
                             link.send_message(DragDropListMsg::Freeze(true));
                             V::dragenter(idx)
                         }

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

@@ -17,8 +17,6 @@ use web_sys::*;
 use yew::prelude::*;
 
 use super::select::SelectItem;
-use crate::components::style::LocalStyle;
-use crate::*;
 
 #[derive(Properties, PartialEq)]
 pub struct DropDownMenuProps<T>
@@ -95,7 +93,7 @@ where
             html! { <span class="no-results">{ "No Completions" }</span> }
         };
 
-        html! { <><LocalStyle href={css!("containers/dropdown-menu")} />{ body }</> }
+        html! { <>{ body }</> }
     }
 }
 

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

@@ -22,8 +22,6 @@ use yew::prelude::*;
 use yew::virtual_dom::VChild;
 
 use super::scroll_panel_item::ScrollPanelItem;
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::utils::*;
 
 #[derive(Properties)]
@@ -253,7 +251,7 @@ impl Component for ScrollPanel {
             }
         };
 
-        html! { <><LocalStyle href={css!("containers/scroll-panel")} />{ items }</> }
+        html! { <>{ items }</> }
     }
 
     fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {