@perspective-dev/viewer 4.5.2 → 5.1.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_3667: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_16364: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_19409: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_20067: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_20096: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_27549: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_6430: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6431: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6432: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6428: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_19529: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_20072: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_20113: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_17084: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_20071: (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-8a8c7d5d696b43ae/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-8a8c7d5d696b43ae/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.1.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-selector.css

@@ -185,6 +185,7 @@
         display: flex;
         flex-direction: row-reverse;
         align-items: center;
+        flex: 1 1 auto;
 
         /* Expression column toolbar buttons */
         span.expression-edit-button,

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;
@@ -41,6 +41,7 @@
         .item_title {
             flex: 0 0 auto;
             font-size: var(--label--font-size, 0.75em);
+            margin-top: 9px;
         }
 
         input {
@@ -70,7 +71,7 @@
 
         .sidebar_header_contents {
             display: flex;
-            margin: 8px;
+            margin: 7px 8px;
             align-items: center;
             border-radius: 3px;
             outline-width: 1px;
@@ -117,6 +118,18 @@
         content: var(--psp-label--color--content, "Color");
     }
 
+    label#window-frame-label:before {
+        content: var(--psp-label--window-frame--content, "Frame");
+    }
+
+    label#window-offset-label:before {
+        content: var(--psp-label--window-offset--content, "Offset");
+    }
+
+    label#window-alpha-label:before {
+        content: var(--psp-label--window-alpha--content, "Alpha");
+    }
+
     label#format-label:before {
         content: var(--psp-label--format--content, "Format");
     }
@@ -296,6 +309,58 @@
     }
 
     div.tab-title#Attributes:before {
-        content: var(--psp-label--attributes-tab--content, "Attributes");
+        content: var(--psp-label--attributes-tab--content, "Expression");
+    }
+
+    div.tab-title#Window:before {
+        content: var(--psp-label--window-tab--content, "Window");
+    }
+}
+
+#window-tab {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+#window-editor-container .window-editor-error {
+    color: var(--error--color, #ff5942);
+    font-size: 11px;
+}
+
+:host {
+    #column_settings_sidebar {
+        .sidebar_header {
+            padding-right: 24px;
+        }
+    }
+
+    #window-order-by .column-selector-column-border {
+        padding-right: 8px;
+    }
+
+    .sidebar_pin_button {
+        position: absolute;
+        right: 6px;
+        width: 14px;
+        height: 14px;
+        z-index: 8;
+        cursor: pointer;
+        background-color: var(--psp--color);
+        opacity: 0.5;
+        background-repeat: no-repeat;
+        -webkit-mask-size: cover;
+        mask-size: cover;
+        -webkit-mask-image: var(--psp-icon--pin--mask-image);
+        mask-image: var(--psp-icon--pin--mask-image);
+        transform: rotate(45deg);
+        &:hover {
+            opacity: 1;
+        }
+
+        &.is-pinned {
+            transform: none;
+            opacity: 1;
+        }
     }
 }

package/src/css/column-style.css

@@ -13,7 +13,8 @@
 
 :host {
     #column-style-container,
-    #plugin-config-container {
+    #plugin-config-container,
+    #window-editor-container {
         outline: none;
         user-select: none;
 
@@ -81,8 +82,8 @@
         label {
             display: block;
             font-size: var(--label--font-size, 0.75em);
-            margin: 4px 0 2px 0;
             width: 100%;
+            margin: 4px 0 2px 0;
         }
 
         span.reset-default-style-disabled {
@@ -160,7 +161,7 @@
 
         .column-style-label {
             display: flex;
-            padding: 4px 0px;
+            padding: 0px;
         }
 
         .indent {

package/src/css/config-selector.css

@@ -60,7 +60,8 @@
         }
     }
 
-    #top_panel {
+    #top_panel,
+    #window-editor-slots {
         display: flex;
         flex-direction: column;
         justify-content: stretch;
@@ -176,6 +177,7 @@
                 flex: 1 1 auto;
                 align-self: stretch;
                 position: relative;
+                min-height: 24px;
                 &:before {
                     content: " ";
                     position: absolute;
@@ -215,6 +217,21 @@
             content: var(--psp-label--filter--content, "Where");
         }
 
+        #window-source label.pivot-selector-label:before {
+            content: var(--psp-label--window-source--content, "Column");
+        }
+
+        #window-order-by label.pivot-selector-label:before {
+            content: var(--psp-label--window-order-by--content, "Order By");
+        }
+
+        #window-partition-by label.pivot-selector-label:before {
+            content: var(
+                --psp-label--window-partition-by--content,
+                "Partition By"
+            );
+        }
+
         .rrow {
             display: flex;
             min-height: 24px;
@@ -341,6 +358,10 @@
         }
     }
 
+    #window-editor-slots .pivot-column {
+        min-height: 24px;
+    }
+
     .sort-icon {
         display: inline-flex;
         margin-left: auto;

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

@@ -0,0 +1,107 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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;
+
+    /* The dropdown-menu surface's inverted hover, from the same theme keys
+     * (`--psp--color`/`--psp--background-color` land on the host via the
+     * modal selector groups) — the Copy/Export pickers this menu spawns use
+     * exactly this idiom. */
+    &:hover {
+        background-color: var(--psp--color);
+        color: var(--psp--background-color);
+    }
+
+    &.disabled {
+        opacity: 0.4;
+        cursor: default;
+
+        &:hover {
+            background-color: 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);
+
+    /* The flyout is a CHILD of its (necessarily hovered, so inverted) parent
+     * item — un-hovered rows must not inherit the parent's inverted
+     * foreground. */
+    color: var(--psp--color);
+    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/containers/tabs.css

@@ -28,11 +28,11 @@
         display: flex;
         flex-direction: column;
         .tab-section:last-child {
-            padding: 12px 0px 12px 8px;
+            padding: 13px 0px 12px 8px;
         }
 
         .tab-section {
-            padding: 12px 0px 0px 8px;
+            padding: 6px 0 0 8px;
             flex: 0 0 auto;
             overflow: hidden;
         }

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);
+}