@perspective-dev/viewer 5.3.1 → 5.4.0

package/src/css/panel-tab.css

@@ -90,6 +90,10 @@
     mask-image: var(--psp-icon--active-indicator--mask-image);
 }
 
+:host([part~="tab"].closing) {
+    pointer-events: none;
+}
+
 /* A lone tab (its viewer has a single plugin child) has no stack to open —
  * no caret. Must follow the `.active` rule (equal specificity) to win when
  * the lone tab is also active. */
@@ -139,6 +143,25 @@
     outline: none;
 }
 
+span#rows {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    margin-left: 12px;
+    margin-right: 6px;
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 0 100000000 auto;
+}
+
+span#rows span.x,
+span#rows span.total {
+    text-overflow: ellipsis;
+    color: var(--psp-inactive--color);
+}
+
 .psp-tab-master {
     margin-right: 6px;
 }

package/src/css/plugin-selector.css

@@ -34,11 +34,12 @@
             margin: 0 0px 0 -9px;
 
             #plugin_selector_border {
-                height: 2px;
-                min-height: 2px;
+                height: 3px;
+                min-height: 3px;
                 width: 100%;
-                background-color: var(--psp-inactive--color, #6e6e6e);
-                margin-top: 2px;
+                margin-top: 1px;
+                background-color: #00000020;
+                border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e);
             }
 
             .plugin-selector-options {
@@ -85,7 +86,6 @@
                 );
                 display: flex;
                 align-items: center;
-                border-bottom: 1px solid transparent;
                 box-shadow: 0px 1px var(--psp-inactive--color, #6e6e6e);
                 cursor: pointer;
             }

package/src/css/render-warning.css

@@ -46,7 +46,7 @@
         }
 
         .plugin_information__icon:before {
-            content: var(--psp-icon-overflow-hint--content);
+            content: var(--psp-icon-overflow-hint--content, var(--psp-missing));
             height: 20px;
             font-family: var(
                 --overflow_hint--font-family,

package/src/css/status-bar.css

@@ -46,10 +46,9 @@
         box-shadow: 0 1px 0 0px var(--psp-inactive--color);
         z-index: 6;
         display: var(--psp-status-bar--display, flex);
-        gap: 4px;
         align-items: center;
         background: var(--psp--background-color);
-        padding: var(--psp-status-bar--padding, 0 31px 0 4px);
+        padding: var(--psp-status-bar--padding, 0 26px 0 4px);
         position: relative;
         height: var(--psp-status-bar--height, 38px);
         min-height: var(--psp-status-bar--height, 38px);
@@ -69,21 +68,28 @@
             flex: 1 1000 auto;
         }
 
-        span#rows {
-            display: flex;
-            align-items: flex-end;
-            gap: 6px;
-            flex: 0 1000 auto;
-            overflow: hidden;
-            margin: 0px 0px;
-            pointer-events: none;
-            span {
-                margin: 0 !important;
+        #panel-bar {
+            flex: 0 0 auto;
+            height: 100%;
+        }
+
+        span#new_panel {
+            & > .icon {
+                -webkit-mask-image: var(--psp-icon--new-panel--mask-image);
+                mask-image: var(--psp-icon--new-panel--mask-image);
+                display: inline-flex;
+                &:before {
+                    line-height: 0;
+                    content: var(--psp-icon--new-panel--mask-image);
+                    visibility: hidden;
+                }
             }
 
-            span.x,
-            span.total {
-                color: var(--psp-inactive--color);
+            span:not(.icon):before {
+                content: var(
+                    --psp-label--new-panel-button--content,
+                    var(--psp-missing)
+                );
             }
         }
 
@@ -371,7 +377,10 @@
             }
 
             span:not(.icon):before {
-                content: var(--psp-label--export-button--content, "Export");
+                content: var(
+                    --psp-label--export-button--content,
+                    var(--psp-missing)
+                );
             }
         }
 
@@ -400,7 +409,10 @@
                 }
             }
             span:not(.icon):before {
-                content: var(--psp-label--reset-button--content);
+                content: var(
+                    --psp-label--reset-button--content,
+                    var(--psp-missing)
+                );
             }
         }
 
@@ -418,7 +430,10 @@
             }
 
             span:not(.icon):before {
-                content: var(--psp-label--copy-button--content);
+                content: var(
+                    --psp-label--copy-button--content,
+                    var(--psp-missing)
+                );
             }
         }
 
@@ -440,8 +455,12 @@
                 height: 100%;
             }
 
+            .select-arrow {
+                margin: 0;
+            }
+
             & > .icon {
-                margin: 0 6px 0 4px;
+                margin: 0 2px 0 2px;
                 height: auto;
                 -webkit-mask-image: var(--psp-icon--theme--mask-image);
                 mask-image: var(--psp-icon--theme--mask-image);
@@ -452,6 +471,10 @@
                     visibility: hidden;
                 }
             }
+
+            & > .dropdown-width-container {
+                padding-left: 5px;
+            }
         }
 
         #theme_icon.modified:hover + #theme > .icon {
@@ -488,6 +511,10 @@
             }
         }
 
+        .modal-target .button > span.icon-label {
+            display: none !important;
+        }
+
         .hover-target {
             margin: 0;
             display: inline-flex;
@@ -495,11 +522,15 @@
             align-items: center;
 
             &:focus-within,
-            &:hover,
-            &.modal-target {
+            &:hover:not(.modal-target) {
                 box-shadow:
                     -4px 0 0 var(--psp--color),
                     4px 0 0 var(--psp--color);
+            }
+
+            &:focus-within,
+            &:hover,
+            &.modal-target {
                 background-color: var(--psp--color);
             }
 

package/src/css/type-icon.css

@@ -13,9 +13,7 @@
 
 :host #selected-columns .type-icon,
 :host #sub-columns .type-icon {
-    /* position: absolute; */
-    /* left: 15px; */
-    margin-left: 4px;
+    margin-left: 1px;
 }
 
 :host .icon {

package/src/css/{containers → ui/containers}/context-menu.css

@@ -12,24 +12,30 @@
  */
 
 /* Panel context menu (right-click a panel). The `<perspective-context-menu>`
- * host is body-mounted by `PortalModal` (which owns position/z-index inline)
- * and themed by the document theme rules' modal selector groups — chrome like
- * `background-color`/`color`/`border` lands on the HOST from `defaults.css` /
- * each theme's `perspective-context-menu[theme="X"]` group, exactly like the
- * Copy/Export menus. Only the interior layout + item states live here. */
+ * host is a viewer light-DOM child in the top layer (see `PortalModal`),
+ * themed by the `--psp-*` vars it inherits; its chrome lives here, exactly
+ * like the Copy/Export menus' surface. */
+
+@import "./dropdown-menu-items.css";
 
 :host {
+    overflow: visible;
+    padding: 0;
+    background-color: var(--psp--background-color, #ffffff);
+    color: var(--psp--color, #161616);
+    border: 1px solid var(--psp-inactive--color, #ababab);
+    border-radius: 0 0 2px 2px;
     outline: none;
     user-select: none;
     font-size: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--psp-dropdown--box-shadow);
 }
 
 .context-menu {
     display: flex;
     flex-direction: column;
     min-width: 120px;
-    padding: 4px 0;
+    padding: 0px 0;
 }
 
 .context-menu-item {
@@ -73,17 +79,11 @@
     }
 }
 
-/* Hover flyout. Positioned OUTSIDE the host's box, so the host-level theme
- * chrome (see the :host comment above) doesn't paint it — rebuild the same
- * chrome from the modal selector groups' vars. Edge-adjacent (`left: 100%`,
- * no gap) so the pointer never leaves the hover chain crossing into it;
- * `top: -5px` aligns its first row with the parent row (4px menu padding +
- * 1px border). */
 .context-menu-submenu {
     display: none;
     position: absolute;
     left: 100%;
-    top: -5px;
+    top: -1px;
     max-height: 50vh;
     overflow-y: auto;
     background-color: var(--psp--background-color, white);
@@ -93,10 +93,16 @@
      * foreground. */
     color: var(--psp--color);
     border: 1px solid var(--psp-inactive--color);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--psp-dropdown--box-shadow);
+}
+
+.context-menu-submenu > .new-panel-menu {
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    min-width: 120px;
 }
 
-/* Non-interactive group label (e.g. client names in the "New" sub-menu). */
 .context-menu-header {
     padding: 4px 12px 2px;
     cursor: default;

package/src/css/ui/containers/dropdown-menu-items.css

@@ -0,0 +1,66 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+.dropdown-group-label {
+    font-size: 0.75em;
+    color: var(--psp-inactive--color);
+    &:not(:first-of-type) {
+        margin-top: 16px;
+    }
+}
+
+.dropdown-group-label[data-label="new-from-table"]::before {
+    content: var(--psp-label--new-from-table--content, var(--psp-missing));
+}
+
+.dropdown-group-label[data-label="new-from-panel"]::before {
+    content: var(--psp-label--new-from-panel--content, var(--psp-missing));
+}
+
+.dropdown-group-sublabel {
+    font-size: 0.75em;
+    text-transform: uppercase;
+    color: var(--psp-inactive--color);
+    margin-top: 6px;
+}
+
+.dropdown-group-container {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+}
+
+.dropdown-group-label,
+.dropdown-group-sublabel,
+.dropdown-group-container > span,
+.no-results {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 -8px;
+    padding: 0 8px;
+}
+
+.dropdown-menu-item {
+    cursor: pointer;
+    min-height: 22px;
+    &:hover {
+        background-color: var(--psp--color);
+        color: var(--psp--background-color);
+    }
+}
+
+.no-results {
+    font-style: italic;
+    padding: 6px 24px;
+    color: #ccc;
+}

package/src/css/{containers → ui/containers}/dropdown-menu.css

@@ -11,15 +11,17 @@
  * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
  */
 
+@import "./dropdown-menu-items.css";
+
 :host {
-    position: fixed;
-    z-index: 10000;
+    overflow: visible;
+    background-color: var(--psp--background-color, #ffffff);
+    color: var(--psp--color, #161616);
+    border: 1px solid var(--psp-inactive--color, #ababab);
+    border-radius: 0 0 2px 2px;
     outline: none;
-    font-size: 0.75em;
-    border: inherit;
-    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    box-shadow: var(--psp-dropdown--box-shadow);
     user-select: none;
-    background-color: white;
     padding: 8px;
 
     display: flex;
@@ -45,51 +47,4 @@
         color: var(--psp-error--color, #ff0000);
         border-color: var(--psp-error--color, #ff0000);
     }
-
-    .selected {
-        background-color: rgba(0, 0, 0, 0.05);
-    }
-
-    .dropdown-group-label {
-        color: var(--psp-inactive--color);
-
-        &:not(:first-of-type) {
-            margin-top: 16px;
-        }
-    }
-
-    .dropdown-group-container {
-        display: flex;
-        flex-direction: column;
-        margin: 0;
-    }
-
-    span {
-        min-height: 22px;
-        display: inline-flex;
-        align-items: center;
-        margin: 0 -8px;
-        padding: 0 8px;
-    }
-
-    .dropdown-group-container span {
-        cursor: pointer;
-    }
-
-    .no-results {
-        font-style: italics;
-        padding: 6px 24px;
-        color: #ccc;
-    }
-}
-
-:host(:hover) {
-    .selected {
-        background-color: transparent;
-    }
-
-    .dropdown-group-container span:hover {
-        background-color: var(--psp--color);
-        color: var(--psp--background-color);
-    }
 }

package/src/css/viewer.css

@@ -14,6 +14,7 @@
 :host {
     --settings-panel-z-index: 10;
     --psp--color: #ff0000;
+    --psp-missing: "__MISSING__";
 }
 
 :host(.shift-active) .shift-alt-icon {
@@ -89,7 +90,9 @@
     pointer-events: var(--override-content-pointer-events);
 }
 
-::slotted(:not([slot^="statusbar-extra"]):not([slot^="tab-"])) {
+::slotted(
+    :not([slot^="statusbar-extra"]):not([slot^="tab-"]):not([slot="modal"])
+) {
     position: absolute;
     inset: 0;
     background-color: var(--psp--background-color) !important;
@@ -100,7 +103,10 @@
         -1.75px 2.75px 0 2.75px var(--psp-inactive--color);
 }
 
-.overlay ::slotted(:not([slot^="statusbar-extra"]):not([slot^="tab-"])) {
+.overlay
+    ::slotted(
+        :not([slot^="statusbar-extra"]):not([slot^="tab-"]):not([slot="modal"])
+    ) {
     box-shadow:
         2.25px 2.25px 0 2.25px var(--psp--background-color),
         -2.25px 2.25px 0 2.25px var(--psp--background-color),
@@ -338,7 +344,6 @@
         z-index: 0;
         position: relative;
         height: 100%;
-        box-shadow: var(--plugin--box-shadow, none);
         overflow: hidden;
         border: var(--psp-plugin--border, none);
         background: var(
@@ -487,8 +492,9 @@
         }
 
         & > .split-panel-divider {
+            background-color: #00000020;
             border-top: 1px solid var(--psp-inactive--color, #6e6e6e);
-            border-bottom: 2px solid var(--psp-inactive--color, #6e6e6e);
+            border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e);
             margin-left: -9px;
             margin-right: 0px;
             flex: 0 0 4px;
@@ -584,9 +590,11 @@
         }
 
         .settings_tab {
+            overflow: hidden;
+            text-overflow: ellipsis;
             border-right: 1px solid var(--psp-inactive--color);
             cursor: pointer;
-            padding: 6px 8px;
+            padding: 5px 8px 7px 8px;
             font-size: var(--label--font-size, 0.75em);
             text-transform: uppercase;
             flex: 0 1 100px;
@@ -605,7 +613,7 @@
             background-color: transparent;
             border-bottom: 1px solid transparent;
             box-shadow: 0px 9px 0px -8px var(--psp-inactive--color);
-            height: calc(100% - 1px);
+            height: 23px;
         }
     }
 
@@ -639,36 +647,28 @@
     }
 
     .sidebar_border {
-        height: 2px;
+        height: 3px;
+        border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e);
         width: 100%;
-        background-color: var(--psp-inactive--color, #6e6e6e);
-        margin-top: 1px;
+        background-color: rgba(0, 0, 0, 0.15);
         flex-shrink: 0;
         flex-grow: 0;
     }
 
     #query_tabbar_tab:before {
-        content: var(--psp-label--query-tab--content);
+        content: var(--psp-label--query-tab--content, var(--psp-missing));
     }
 
     #plugin_tabbar_tab:before {
-        content: var(--psp-label--plugin-tab--content);
+        content: var(--psp-label--plugin-tab--content, var(--psp-missing));
     }
 
     #debug_tabbar_tab:before {
-        content: var(--psp-label--debug-tab--content);
+        content: var(--psp-label--debug-tab--content, var(--psp-missing));
     }
 
     #chat_tabbar_tab:before {
-        content: var(--psp-label--chat-tab--content);
-    }
-
-    label#stack-label:before {
-        content: var(--psp-label--stack--content, "Stack");
-    }
-
-    label#alt_axis-label:before {
-        content: var(--psp-label--alt-axis--content, "Alt Axis");
+        content: var(--psp-label--chat-tab--content, var(--psp-missing));
     }
 }
 
@@ -853,7 +853,10 @@
             user-select: none;
             &:before {
                 text-transform: uppercase;
-                content: var(--psp-label--chat-reasoning--content);
+                content: var(
+                    --psp-label--chat-reasoning--content,
+                    var(--psp-missing)
+                );
                 font-size: var(--psp-label--font-size, 0.75em);
             }
         }
@@ -898,7 +901,7 @@
         align-items: flex-end;
 
         /* The prompt is a `MirroredTextarea` (see
-         * `form/mirrored-textarea.css`): it is exactly as tall as its
+         * `ui/form/mirrored-textarea.css`): it is exactly as tall as its
          * text, so this wrapper owns the visible box and caps how far
          * that growth goes before it scrolls instead. */
         #chat_input_scroll {
@@ -933,7 +936,10 @@
                      * `placeholder` attribute is untranslatable and is
                      * kept only for assistive tech. */
                     &.is-empty:before {
-                        content: var(--psp-label--chat-placeholder--content);
+                        content: var(
+                            --psp-label--chat-placeholder--content,
+                            var(--psp-missing)
+                        );
                         color: var(--psp-inactive--color, #6e6e6e);
                     }
                 }
@@ -965,11 +971,11 @@
         }
 
         #chat_send_button:before {
-            content: var(--psp-label--chat-send--content);
+            content: var(--psp-label--chat-send--content, var(--psp-missing));
         }
 
         #chat_stop_button:before {
-            content: var(--psp-label--chat-stop--content);
+            content: var(--psp-label--chat-stop--content, var(--psp-missing));
         }
     }
 

package/src/rust/components/chat_panel.rs

@@ -18,7 +18,7 @@
 use yew::prelude::*;
 
 use crate::agent::{AgentSlot, ChatEntry, render_markdown};
-use crate::components::form::mirrored_textarea::MirroredTextarea;
+use crate::ui::MirroredTextarea;
 
 #[derive(Properties, PartialEq)]
 struct ChatReasoningProps {

package/src/rust/components/{form/code_editor.rs → code_editor.rs}

@@ -10,6 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+mod highlight;
+
 use std::rc::Rc;
 
 use perspective_client::ExprValidationError;
@@ -17,10 +19,10 @@ use wasm_bindgen::JsCast;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::components::form::highlight::highlight;
-use crate::components::form::mirrored_textarea::MirroredTextarea;
+use self::highlight::highlight;
 use crate::components::function_dropdown::{FunctionDropDownElement, FunctionDropDownPortal};
 use crate::exprtk::{Cursor, tokenize};
+use crate::ui::MirroredTextarea;
 use crate::utils::*;
 
 #[derive(Properties, PartialEq)]

package/src/rust/components/column_dropdown.rs

@@ -21,9 +21,9 @@ use yew::html::ImplicitClone;
 use yew::prelude::*;
 
 use super::column_selector::InPlaceColumn;
-use super::portal::PortalModal;
 use super::style::StyleSurface;
 use crate::session::Session;
+use crate::ui::PortalModal;
 use crate::utils::*;
 use crate::*;
 
@@ -216,7 +216,7 @@ impl Component for ColumnDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
-                    surface={StyleSurface::ColumnDropdown}
+                    sheet={StyleSurface::ColumnDropdown.sheet()}
                     {target}
                     own_focus=false
                     {on_close}