@perspective-dev/viewer 4.5.2 → 5.0.0

package/dist/wasm/perspective-viewer.wasm.d.ts

@@ -24,43 +24,49 @@ export const perspectivedebugpluginelement_new: (a: number) => number;
 export const perspectivedebugpluginelement_restore: (a: number, b: number, c: number) => void;
 export const perspectivedebugpluginelement_save: (a: number, b: number) => void;
 export const perspectivedebugpluginelement_select_mode: (a: number, b: number) => void;
+export const perspectivedebugpluginelement_update: (a: number, b: number) => number;
 export const perspectiveviewerelement___get_model: (a: number) => number;
+export const perspectiveviewerelement_addPanel: (a: number, b: number) => number;
 export const perspectiveviewerelement_connectedCallback: (a: number, b: number) => void;
 export const perspectiveviewerelement_copy: (a: number, b: number) => number;
 export const perspectiveviewerelement_delete: (a: number) => number;
 export const perspectiveviewerelement_download: (a: number, b: number) => number;
-export const perspectiveviewerelement_eject: (a: number) => number;
+export const perspectiveviewerelement_eject: (a: number, b: number) => number;
 export const perspectiveviewerelement_export: (a: number, b: number) => number;
 export const perspectiveviewerelement_flush: (a: number) => number;
+export const perspectiveviewerelement_getActivePanel: (a: number) => number;
 export const perspectiveviewerelement_getAllPlugins: (a: number) => number;
 export const perspectiveviewerelement_getClient: (a: number, b: number) => number;
-export const perspectiveviewerelement_getEditPort: (a: number, b: number) => void;
+export const perspectiveviewerelement_getEditPort: (a: number, b: number, c: number) => void;
+export const perspectiveviewerelement_getPanelNames: (a: number) => number;
 export const perspectiveviewerelement_getPlugin: (a: number, b: number, c: number, d: number) => void;
-export const perspectiveviewerelement_getRenderStats: (a: number, b: number) => void;
-export const perspectiveviewerelement_getSelection: (a: number) => number;
+export const perspectiveviewerelement_getRenderStats: (a: number, b: number, c: number) => void;
+export const perspectiveviewerelement_getSelection: (a: number, b: number, c: number) => void;
 export const perspectiveviewerelement_getTable: (a: number, b: number) => number;
-export const perspectiveviewerelement_getView: (a: number) => number;
-export const perspectiveviewerelement_getViewConfig: (a: number) => number;
+export const perspectiveviewerelement_getView: (a: number, b: number) => number;
+export const perspectiveviewerelement_getViewConfig: (a: number, b: number) => number;
 export const perspectiveviewerelement_load: (a: number, b: number, c: number) => void;
 export const perspectiveviewerelement_new: (a: number) => number;
-export const perspectiveviewerelement_openColumnSettings: (a: number, b: number, c: number, d: number) => number;
-export const perspectiveviewerelement_reset: (a: number, b: number) => number;
+export const perspectiveviewerelement_removePanel: (a: number, b: number, c: number) => number;
+export const perspectiveviewerelement_reset: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_resetError: (a: number) => number;
 export const perspectiveviewerelement_resetThemes: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_resize: (a: number, b: number) => number;
-export const perspectiveviewerelement_restore: (a: number, b: number) => number;
+export const perspectiveviewerelement_restore: (a: number, b: number, c: number) => number;
+export const perspectiveviewerelement_restoreWorkspace: (a: number, b: number) => number;
 export const perspectiveviewerelement_restyleElement: (a: number) => number;
-export const perspectiveviewerelement_save: (a: number) => number;
+export const perspectiveviewerelement_save: (a: number, b: number) => number;
+export const perspectiveviewerelement_saveWorkspace: (a: number) => number;
+export const perspectiveviewerelement_setActivePanel: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_setAutoPause: (a: number, b: number) => number;
 export const perspectiveviewerelement_setAutoSize: (a: number, b: number) => void;
-export const perspectiveviewerelement_setSelection: (a: number, b: number, c: number) => void;
+export const perspectiveviewerelement_setSelection: (a: number, b: number, c: number, d: number) => void;
 export const perspectiveviewerelement_setThrottle: (a: number, b: number, c: number) => void;
-export const perspectiveviewerelement_toggleColumnSettings: (a: number, b: number, c: number) => number;
+export const perspectiveviewerelement_toggleColumnSettings: (a: number, b: number, c: number, d: number) => number;
 export const perspectiveviewerelement_toggleConfig: (a: number, b: number) => number;
 export const registerPlugin: (a: number, b: number) => void;
 export const perspectivedebugpluginelement_delete: (a: number) => number;
 export const perspectivedebugpluginelement_resize: (a: number) => number;
-export const perspectivedebugpluginelement_update: (a: number, b: number) => number;
 export const perspectivedebugpluginelement_min_config_columns: (a: number) => number;
 export const perspectivedebugpluginelement_restyle: (a: number) => void;
 export const exportdropdownmenuelement_new: (a: number) => number;
@@ -157,19 +163,21 @@ export const virtualdataslice_setIntegerCol: (a: number, b: number, c: number, d
 export const virtualdataslice_setStringCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
 export const virtualserver_handleRequest: (a: number, b: number, c: number) => number;
 export const virtualserver_new: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_3003: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_13420: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_16304: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_16950: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_16975: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_24178: (a: number, b: number, c: number, d: number) => void;
-export const __wasm_bindgen_func_elem_5053: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_5054: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_5051: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_16419: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_16992: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_14095: (a: number, b: number) => number;
-export const __wasm_bindgen_func_elem_16953: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_15590: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_3497: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18482: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_19140: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_19169: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_26445: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_6144: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6145: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6146: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6142: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_18602: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_19145: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_19186: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_16279: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_19144: (a: number, b: number) => void;
 export const __wbindgen_export: (a: number, b: number) => number;
 export const __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;
 export const __wbindgen_export3: (a: number) => void;

package/dist/wasm/snippets/perspective-viewer-daeef4ceb066e6c7/inline0.js

@@ -0,0 +1,6 @@
+
+    export function define_panel_tab(name) {
+        if (!customElements.get(name)) {
+            customElements.define(name, class extends HTMLElement {});
+        }
+    }

package/dist/wasm/snippets/{perspective-viewer-93064d0d79855d97/inline3.js → perspective-viewer-daeef4ceb066e6c7/inline4.js}

@@ -1,5 +1,10 @@
 
     export function bootstrap(psp, name, clsname, statics) {
+        if (customElements.get(name)) {
+            console.warn(`Custom element "${name}" is already registered; skipping duplicate registration (Perspective was loaded more than once on this page).`);
+            return;
+        }
+
         const cls = psp[clsname];
         const proto = cls.prototype;
         class x extends HTMLElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer",
-  "version": "4.5.2",
+  "version": "5.0.0",
   "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective",
   "keywords": [
     "perspective",
@@ -55,7 +55,8 @@
   },
   "dependencies": {
     "@perspective-dev/client": "",
-    "pro_self_extracting_wasm": "0.0.9"
+    "pro_self_extracting_wasm": "0.0.9",
+    "regular-layout": "=0.6.1"
   },
   "devDependencies": {
     "@perspective-dev/esbuild-plugin": "",

package/src/css/_context_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/context-menu.css";

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

@@ -15,7 +15,7 @@
     #column_settings_sidebar {
         overflow: hidden;
         text-overflow: ellipsis;
-        z-index: 4;
+        z-index: 7;
 
         #attributes-button-panel {
             flex: 0 0 auto;

package/src/css/containers/context-menu.css

@@ -0,0 +1,101 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+/* 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 {
+    outline: none;
+    user-select: none;
+    font-size: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.context-menu {
+    display: flex;
+    flex-direction: column;
+    min-width: 120px;
+    padding: 4px 0;
+}
+
+.context-menu-item {
+    position: relative;
+    padding: 4px 12px;
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover {
+        background: var(
+            --psp-context-menu--hover--background,
+            var(--psp-active--background, rgba(0, 0, 0, 0.08))
+        );
+        color: var(--psp-context-menu--hover--color, inherit);
+    }
+
+    &.disabled {
+        opacity: 0.4;
+        cursor: default;
+
+        &:hover {
+            background: transparent;
+            color: inherit;
+        }
+    }
+
+    &.has-submenu {
+        display: flex;
+        align-items: center;
+
+        &::after {
+            content: "▸";
+            margin-left: auto;
+            padding-left: 12px;
+        }
+
+        &:hover > .context-menu-submenu {
+            display: flex;
+        }
+    }
+}
+
+/* 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;
+    max-height: 50vh;
+    overflow-y: auto;
+    background-color: var(--psp--background-color, white);
+    border: 1px solid var(--psp-inactive--color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Non-interactive group label (e.g. client names in the "New" sub-menu). */
+.context-menu-header {
+    padding: 4px 12px 2px;
+    cursor: default;
+    white-space: nowrap;
+    font-size: 9px;
+    text-transform: uppercase;
+    color: var(--psp-inactive--color, #ababab);
+}

package/src/css/panel-tab.css

@@ -0,0 +1,193 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+:host([part~="tab"]) {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: 100%;
+    min-width: 0;
+    padding: 0 7px 0 13px;
+    cursor: pointer;
+    font-size: 11px;
+    white-space: nowrap;
+    overflow: hidden;
+    color: var(--psp--color, inherit);
+    background: var(--psp-inactive--border-color, #ffffff) !important;
+    box-shadow:
+        2.25px -2.25px 0 2.25px var(--psp-inactive--border-color),
+        -2.25px -2.25px 0 2.25px var(--psp-inactive--border-color);
+}
+
+:host([part~="tab"].visible) {
+    z-index: 6;
+    background: var(--psp--background-color, #ffffff) !important;
+    /* box-shadow:
+        2.25px -2.25px 0 2.25px var(--psp--background-color),
+        -2.25px -2.25px 0 2.25px var(--psp--background-color),
+        2.75px -2.75px 0 2.75px var(--psp-inactive--color),
+        0 12.5px 0 -11.5px var(--psp-inactive--border-color); */
+}
+
+.psp-tab-grip {
+    flex: 0 0 auto;
+    width: 5px;
+    height: 12px;
+    margin-right: 10px;
+    pointer-events: none;
+    background-color: var(--psp-inactive--color);
+    -webkit-mask-image: var(--psp-icon--column-drag-handle--mask-image);
+    mask-image: var(--psp-icon--column-drag-handle--mask-image);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+
+.psp-tab-caret {
+    flex: 0 0 auto;
+    display: none;
+    margin-right: 12px;
+    pointer-events: none;
+}
+
+.psp-tab-caret {
+    /* content: " "; */
+    display: block;
+
+    width: 12px;
+    height: 12px;
+    pointer-events: none;
+    background-color: var(--psp--color);
+    /* -webkit-mask-image: var(--psp-icon--active-indicator--mask-image);
+    mask-image: var(--psp-icon--active-indicator--mask-image); */
+    -webkit-mask-image: var(--psp-icon--column-drag-handle--mask-image);
+    mask-image: var(--psp-icon--column-drag-handle--mask-image);
+
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+
+:host([part~="tab"].active) .psp-tab-caret {
+    display: block;
+    -webkit-mask-image: var(--psp-icon--active-indicator--mask-image);
+    mask-image: var(--psp-icon--active-indicator--mask-image);
+}
+
+/* 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. */
+:host([part~="tab"].single) .psp-tab-caret {
+    display: none;
+}
+
+.psp-tab-title {
+    height: 11px;
+    line-height: 12px;
+    flex: 1 1 auto;
+    pointer-events: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.psp-tab-title.placeholder {
+    color: var(--psp-inactive--color);
+}
+
+.psp-tab-title.input-sizer {
+    flex: 1 1 auto;
+    pointer-events: auto;
+    display: inline-block;
+    position: relative;
+    min-width: 24px;
+}
+
+.input-sizer::after {
+    content: attr(data-value) " ";
+    visibility: hidden;
+    white-space: nowrap;
+    padding-right: 2px;
+}
+
+.input-sizer input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-overflow: ellipsis;
+    outline: none;
+}
+
+.psp-tab-master {
+    margin-right: 6px;
+}
+
+.psp-tab-master:before {
+    content: var(--psp-broadcast--content, "[BROADCAST]");
+}
+
+.psp-tab-close,
+.psp-tab-settings {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: inherit;
+}
+
+.psp-tab-close:hover::before,
+.psp-tab-settings:hover::before {
+    background-color: var(--psp--color);
+}
+
+.psp-tab-close::before,
+.psp-tab-settings::before {
+    content: "";
+
+    /* TODO don't hard-code dimensions */
+    width: 20px;
+    height: 20px;
+    background-color: var(--psp-inactive--color);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+
+.psp-tab-close::before {
+    -webkit-mask-image: var(--psp-icon--close--mask-image);
+    mask-image: var(--psp-icon--close--mask-image);
+}
+
+.psp-tab-settings::before {
+    -webkit-mask-image: var(--psp-icon--drawer-tab-inverted--mask-image);
+    mask-image: var(--psp-icon--drawer-tab-inverted--mask-image);
+}

package/src/css/plugin-selector.css

@@ -20,7 +20,7 @@
         #plugin_selector_container {
             min-height: var(
                 --psp-plugin-selector--height,
-                var(--psp-status-bar--height, 48px)
+                var(--psp-status-bar--height, 38px)
             );
             display: flex;
             white-space: nowrap;
@@ -48,6 +48,7 @@
             &.open {
                 position: absolute;
                 margin: 0;
+                margin-left: -1px;
                 top: 0;
                 left: 0;
                 right: 0;
@@ -58,15 +59,11 @@
                 z-index: 3;
                 color: var(--psp--color, #042121);
                 /* background: var(--psp--background-color); */
-
-                .plugin-select-item {
-                    padding-left: 8px;
-                }
             }
 
             .plugin-select-item-name {
-                padding-left: 10px;
-                font-size: 1.33333em;
+                padding-left: 4px;
+                font-size: 1.1em;
             }
 
             .plugin-select-item-name:before {
@@ -76,14 +73,14 @@
 
             .plugin-select-item {
                 /* width: 48px; */
-                padding-left: 9px;
+                padding-left: 5px;
                 height: var(
                     --psp-plugin-selector--height,
-                    var(--psp-status-bar--height, 48px)
+                    var(--psp-status-bar--height, 38px)
                 );
                 min-height: var(
                     --psp-plugin-selector--height,
-                    var(--psp-status-bar--height, 48px)
+                    var(--psp-status-bar--height, 38px)
                 );
                 display: flex;
                 align-items: center;