@perspective-dev/viewer 5.1.0 → 5.3.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;
@@ -43,6 +46,7 @@ export const perspectiveviewerelement_getPlugin: (a: number, b: number, c: numbe
 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_getThemes: (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;
@@ -56,7 +60,7 @@ export const perspectiveviewerelement_restore: (a: number, b: number, c: number)
 export const perspectiveviewerelement_restoreWorkspace: (a: number, b: number) => number;
 export const perspectiveviewerelement_restyleElement: (a: number) => number;
 export const perspectiveviewerelement_save: (a: number, b: number) => number;
-export const perspectiveviewerelement_saveWorkspace: (a: number) => number;
+export const perspectiveviewerelement_saveWorkspace: (a: number, b: 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;
@@ -96,7 +100,7 @@ export const client_table: (a: number, b: number, c: number) => number;
 export const client_terminate: (a: number, b: number) => void;
 export const genericsqlvirtualservermodel_getHostedTables: (a: number, b: number) => void;
 export const genericsqlvirtualservermodel_new: (a: number, b: number) => void;
-export const genericsqlvirtualservermodel_tableMakeView: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const genericsqlvirtualservermodel_tableMakeView: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
 export const genericsqlvirtualservermodel_tableSchema: (a: number, b: number, c: number, d: number) => void;
 export const genericsqlvirtualservermodel_tableSize: (a: number, b: number, c: number, d: number) => void;
 export const genericsqlvirtualservermodel_tableValidateExpression: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
@@ -163,21 +167,22 @@ 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_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 __wasm_bindgen_func_elem_17916: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18625: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_19491: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_4310: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_24164: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_32290: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_18035: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_18630: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7520: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7521: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7522: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7518: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_24181: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_20501: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_18629: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_20502: (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.1.0",
+  "version": "5.3.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,6 +181,14 @@
         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;

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

@@ -150,15 +150,15 @@
         content: var(--psp-label--number-fg-mode--content, "Foreground");
     }
 
-    label#pos_fg_color-label:before {
+    label#fg_colors-label:before {
         content: var(--psp-label--number-fg-mode--content, "Foreground");
     }
 
     label#number_bg_mode-label:before {
-        content: var(--psp-label--number-fg-mode--content, "Background");
+        content: var(--psp-label--number-bg-mode--content, "Background");
     }
 
-    label#pos_bg_color-label:before {
+    label#bg_colors-label:before {
         content: var(--psp-label--pos-bg-color--content, "Background");
     }
 
@@ -187,8 +187,12 @@
         content: var(--psp-label--series--content, "Series");
     }
 
-    label#color-range-label:before {
-        content: var(--psp-label--color-range--content, "Color Range");
+    label#palette-label:before {
+        content: var(--psp-label--palette--content, "Palette");
+    }
+
+    label#gradient-label:before {
+        content: var(--psp-label--gradient--content, "Gradient");
     }
 
     label#style-label:before {

package/src/css/column-style.css

@@ -221,34 +221,224 @@
             align-items: center;
             flex-wrap: nowrap;
             flex: 1 1 100%;
-            .color-thermometer {
+        }
+
+        .palette-selector {
+            .palette-swatches {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                gap: 4px;
                 flex: 1 1 auto;
+                width: 0px;
+                max-height: 84px;
+                overflow-y: auto;
+                overflow-x: hidden;
+                padding: 0px 0 4px 0;
+            }
+
+            .palette-swatch {
+                position: relative;
+                width: 24px;
                 height: 24px;
+                touch-action: none;
+
+                input[type="color"] {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 3px;
+                }
+
+                &.dragging {
+                    opacity: 0.5;
+                    outline: 1px dashed var(--psp--color);
+                    outline-offset: -1px;
+                    border-radius: 3px;
+                }
+
+                .palette-swatch-remove {
+                    position: absolute;
+                    top: -2px;
+                    right: -7px;
+                    width: 14px;
+                    height: 14px;
+                    cursor: pointer;
+                    display: none;
+                    background-color: var(--psp--color);
+                    -webkit-mask-size: cover;
+                    mask-size: cover;
+                    -webkit-mask-image: var(--psp-icon--close--mask-image);
+                    mask-image: var(--psp-icon--close--mask-image);
+                }
+
+                &:hover .palette-swatch-remove {
+                    display: inline-block;
+                }
+            }
+
+            .palette-swatches.reordering .palette-swatch-remove {
+                display: none;
+            }
+
+            .palette-add {
+                width: 22px;
+                height: 22px;
+                border: 1px dashed var(--psp-inactive--color);
+                border-radius: 3px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                &:before {
+                    content: "+";
+                    font-size: 14px;
+                    line-height: 1;
+                    color: var(--psp-inactive--color);
+                }
+
+                &:hover {
+                    border-color: var(--psp--color);
+
+                    &:before {
+                        color: var(--psp--color);
+                    }
+                }
             }
         }
 
-        .color-selector {
-            display: grid;
+        .gradient-stops-selector {
+            padding: 12px 0 16px 0;
 
-            input {
-                grid-column: 1;
-                grid-row: 1;
+            .gradient-stops-bar {
+                cursor: copy;
+                position: relative;
+                flex: 1 1 auto;
+                height: 24px;
+                border-radius: 2px;
             }
-            .color-label {
+
+            .gradient-stops-bar.discrete {
+                cursor: auto;
+                position: relative;
+                flex: 1 1 auto;
+                height: 24px;
+                border-radius: 2px;
+            }
+
+            .gradient-stop-handle {
+                position: absolute;
+                top: 0;
+                transform: translateX(-50%);
                 display: flex;
-                justify-content: center;
+                flex-direction: column;
                 align-items: center;
-                font-size: 14px;
-                grid-column: 1;
-                grid-row: 1;
-                margin: 0;
-                font-family: var(--psp-button--font-family, inherit);
-                color: var(--sign--color, white);
-                width: 36px;
+                width: 14px;
+            }
+
+            .gradient-stop-grip {
+                width: 14px;
                 height: 24px;
-                text-align: center;
-                z-index: 1;
-                pointer-events: none;
+                cursor: ew-resize;
+                touch-action: none;
+
+                &.disabled {
+                    cursor: default;
+                }
+
+                &:before {
+                    content: "";
+                    display: block;
+                    width: 0px;
+                    height: 100%;
+                    margin: 0 auto;
+                    border: 1px solid var(--psp--background-color, #fff);
+                }
+            }
+
+            .gradient-stop-remove {
+                position: absolute;
+                top: -14px;
+                width: 14px;
+                height: 13px;
+                cursor: pointer;
+                display: inline-block;
+                background-color: var(--psp--color);
+                -webkit-mask-size: cover;
+                mask-size: cover;
+                -webkit-mask-image: var(--psp-icon--close--mask-image);
+                mask-image: var(--psp-icon--close--mask-image);
+
+                &.disabled {
+                    cursor: default;
+                    background-color: var(--psp-inactive--color);
+                }
+            }
+
+            .gradient-stop-lock {
+                position: absolute;
+                top: -14px;
+                width: 14px;
+                height: 13px;
+                display: inline-block;
+                background-color: var(--psp--color);
+                -webkit-mask-size: cover;
+                mask-size: cover;
+                -webkit-mask-image: var(--psp-icon--lock--mask-image);
+                mask-image: var(--psp-icon--lock--mask-image);
+            }
+
+            .gradient-stop-handle input[type="color"] {
+                width: 14px;
+                height: 14px;
+                margin-top: 2px;
+                border-radius: 3px;
+            }
+        }
+
+        .named-value-controls {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: 10px;
+            flex: 1 1 100%;
+            height: 0;
+            margin-top: 10px;
+            margin-bottom: -10px;
+            margin-right: 24px;
+            position: relative;
+            z-index: 1;
+            font-size: var(--label--font-size, 0.75em);
+            color: var(--psp-inactive--color);
+
+            select.named-value-select {
+                height: 15px;
+                padding: 0;
+                font-size: var(--label--font-size, 0.75em);
+                color: inherit;
+                background: none;
+                border: none;
+                cursor: pointer;
+
+                &:hover {
+                    color: var(--psp--color, inherit);
+                }
+            }
+
+            .named-value-pin {
+                cursor: pointer;
+                user-select: none;
+                line-height: 15px;
+
+                &:before {
+                    font-family: var(--psp-button--font-family, inherit);
+                    color: var(--psp-inactive--color, #666);
+                    content: var(--psp-label--pin-button--content, "Save");
+                }
+
+                &:hover:before {
+                    color: var(--psp--color, inherit);
+                }
             }
         }
 
@@ -259,23 +449,11 @@
             padding: 0;
             font-family: inherit;
             overflow: hidden;
-            border-radius: 12px;
+            border-radius: 3px;
 
             &:hover {
                 opacity: 0.8;
             }
-
-            &.pos-color-param {
-                width: 36px;
-                border-radius: 12px 0 0 12px;
-                margin: 0 1px 0 0;
-            }
-
-            &.neg-color-param {
-                width: 36px;
-                border-radius: 0 12px 12px 0;
-                margin: 0 0 0 1px;
-            }
         }
 
         ::-webkit-color-swatch-wrapper {

package/src/css/config-selector.css

@@ -201,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 {
@@ -320,7 +354,8 @@
             }
         }
 
-        .group_rollup_wrapper {
+        .group_rollup_wrapper,
+        .split_rollup_wrapper {
             margin-bottom: -30px;
             flex: 0 1 auto;
             color: var(--psp-inactive--color);

package/src/css/dom/select.css

@@ -16,12 +16,13 @@
         position: relative;
         flex: 1 1 auto;
         height: 100%;
+        font-size: 12px;
 
         &:after {
             content: attr(data-value) " ";
             visibility: hidden;
             white-space: nowrap;
-            padding-right: 17px;
+            padding-right: 20px;
         }
 
         select {

package/src/css/form/code-editor.css

@@ -12,6 +12,10 @@
  */
 
 :host {
+    #editor.contained {
+        contain: inline-size;
+    }
+
     #editor {
         display: flex;
         flex: 1 1 auto;
@@ -23,10 +27,9 @@
             height: 100px;
         }
 
-        #editor-inner {
+        /* `position`/`display` come from `.mirrored-textarea`. */
+        .editor-inner {
             overflow: hidden;
-            position: relative;
-            display: flex;
             flex: 1 1 auto;
         }
 
@@ -66,10 +69,6 @@
             white-space: pre;
             overflow: hidden;
 
-            span {
-                /* display: contents; */
-            }
-
             .comment {
                 color: var(--psp-code-editor--comment--color, orange);
             }

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