@perspective-dev/viewer 5.0.0 → 5.2.0

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

@@ -27,6 +27,9 @@ export const perspectivedebugpluginelement_select_mode: (a: number, b: number) =
 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_agentConfig: (a: number, b: number, c: number) => void;
+export const perspectiveviewerelement_agentPrompt: (a: number, b: number, c: number) => number;
+export const perspectiveviewerelement_agentReset: (a: 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;
@@ -163,21 +166,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_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 __wasm_bindgen_func_elem_17003: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_17713: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18571: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_3989: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_23208: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_31328: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_17122: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_17718: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6981: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6982: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6983: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6979: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_23225: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_19569: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_17717: (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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective",
   "keywords": [
     "perspective",
@@ -69,6 +69,7 @@
     "@types/node": ">=22",
     "@types/react-dom": ">17 <20",
     "prettier": ">=3 <4",
+    "ts-json-schema-generator": "^2.4.0",
     "typedoc": "^0.28.7",
     "typescript": ">=5 <6",
     "zx": ">=8 <9"

package/src/css/_viewer_bundle.css

@@ -35,6 +35,7 @@
 @import "render-warning.css";
 @import "status-bar.css";
 
+@import "form/mirrored-textarea.css";
 @import "form/code-editor.css";
 @import "form/debug.css";
 

package/src/css/column-selector.css

@@ -181,10 +181,19 @@
         border-color: var(--psp--color);
     }
 
+    /* Composed inside a `.pivot-column` pill (the window editor's slots),
+       the row's `min-width: auto` floor would hold it at content width and
+       overflow the container-stretched pill - collapse-to-0 requires the
+       definite-width chain to pass through. */
+    .pivot-column > .column-selector-column {
+        min-width: 0;
+    }
+
     .column-selector-column {
         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

@@ -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;
@@ -199,12 +201,46 @@
             pointer-events: none;
         }
 
+        /* `--psp-label--pivot--content` is set inline by the pivot slot
+         * when the ACTIVE plugin declares what the field draws (a `Y Line`
+         * groups by its X axis; a `Treemap` by its hierarchy). The slot
+         * emits an intl var reference rather than words, so these labels
+         * localize like any other.
+         *
+         * The role leads and the field's own name follows as a secondary
+         * label, so the reader learns what this slot DRAWS without losing
+         * which config field it IS - and a plugin that declares no role
+         * shows just the field name, exactly as before. The slot sets
+         * `--psp-label--pivot-secondary--display` as a presence flag,
+         * since CSS cannot test whether a custom property is set. */
         #group_by label.pivot-selector-label:before {
-            content: var(--psp-label--group-by--content, "Group By");
+            content: var(
+                --psp-label--pivot--content,
+                var(--psp-label--group-by--content, "Group By")
+            );
+        }
+
+        #group_by label.pivot-selector-label:after {
+            content: "(" var(--psp-label--group-by--content, "Group By") ")";
         }
 
         #split_by label.pivot-selector-label:before {
-            content: var(--psp-label--split-by--content, "Split By");
+            content: var(
+                --psp-label--pivot--content,
+                var(--psp-label--split-by--content, "Split By")
+            );
+        }
+
+        #split_by label.pivot-selector-label:after {
+            content: "(" var(--psp-label--split-by--content, "Split By") ")";
+        }
+
+        #group_by label.pivot-selector-label:after,
+        #split_by label.pivot-selector-label:after {
+            display: var(--psp-label--pivot-secondary--display, none);
+            margin-left: 6px;
+            opacity: 0.6;
+            font-size: 0.9em;
         }
 
         #sort label.pivot-selector-label:before {
@@ -215,6 +251,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;
@@ -303,7 +354,8 @@
             }
         }
 
-        .group_rollup_wrapper {
+        .group_rollup_wrapper,
+        .split_rollup_wrapper {
             margin-bottom: -30px;
             flex: 0 1 auto;
             color: var(--psp-inactive--color);
@@ -341,6 +393,10 @@
         }
     }
 
+    #window-editor-slots .pivot-column {
+        min-height: 24px;
+    }
+
     .sort-icon {
         display: inline-flex;
         margin-left: auto;

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

@@ -38,12 +38,13 @@
     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: var(
-            --psp-context-menu--hover--background,
-            var(--psp-active--background, rgba(0, 0, 0, 0.08))
-        );
-        color: var(--psp-context-menu--hover--color, inherit);
+        background-color: var(--psp--color);
+        color: var(--psp--background-color);
     }
 
     &.disabled {
@@ -51,7 +52,7 @@
         cursor: default;
 
         &:hover {
-            background: transparent;
+            background-color: transparent;
             color: inherit;
         }
     }
@@ -86,6 +87,11 @@
     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);
 }

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/form/code-editor.css

@@ -23,10 +23,9 @@
             height: 100px;
         }
 
-        #editor-inner {
+        /* `position`/`display` come from `.mirrored-textarea`. */
+        .editor-inner {
             overflow: hidden;
-            position: relative;
-            display: flex;
             flex: 1 1 auto;
         }
 

package/src/css/form/mirrored-textarea.css

@@ -0,0 +1,81 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+/* Geometry for `components/form/mirrored_textarea.rs`: an invisible
+ * `<textarea>` stacked over a `<pre>` mirror of its text, so that layout -
+ * not a JS resize loop - sizes the box.
+ *
+ * This file fixes ONLY what must agree between the two layers, because
+ * every disagreement shows up as a caret sitting somewhere other than the
+ * glyphs it is between. Consumers own the rest of the box (padding,
+ * border, min/max size) and choose the growth axes via `white-space`. */
+
+:host {
+    .mirrored-textarea {
+        position: relative;
+        display: flex;
+
+        /* Anything affecting glyph advance or line breaking must be
+         * identical in both layers - hence one selector, never two. */
+        & > .mirrored-textarea-input,
+        & > .mirrored-textarea-mirror {
+            box-sizing: border-box;
+            font: inherit;
+            letter-spacing: inherit;
+            line-height: inherit;
+            tab-size: inherit;
+            margin: 0;
+            border: none;
+            white-space: pre-wrap;
+            overflow-wrap: anywhere;
+        }
+
+        & > .mirrored-textarea-input {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+
+            /* The container's padding, so the two layers' text origins
+             * and wrap widths coincide however a consumer pads the box:
+             * the mirror starts at the content box, and this element
+             * covers the padding box and re-applies the same inset. */
+            padding: inherit;
+
+            resize: none;
+            outline: none;
+            overscroll-behavior: none;
+
+            /* Functional, not visual: keystrokes, selection and caret
+             * only. The glyphs the user reads are the mirror's. */
+            color: transparent;
+            background-color: transparent;
+            caret-color: var(--psp--color, #161616);
+        }
+
+        & > .mirrored-textarea-mirror {
+            /* Clicks and drags belong to the input layer above. */
+            pointer-events: none;
+        }
+
+        /* The mirror paints everything the user sees, INCLUDING the
+         * placeholder: a consumer supplies it as `content` on
+         * `.is-empty`, which the intl label mechanism can localize.
+         * The native `placeholder` attribute stays for assistive tech
+         * but is never painted - it would double up, and no stylesheet
+         * can translate an attribute. */
+        & > .mirrored-textarea-input::placeholder {
+            color: transparent;
+        }
+    }
+}