@perspective-dev/viewer-datagrid 4.3.0 → 4.4.1

package/src/{less/scrollbar.less → css/scrollbar.css}

@@ -1,20 +1,21 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
-// Scrollbar styling
+/* Scrollbar styling */
 regular-table {
     outline: none;
 
-    // webkit (chrome, safari, etc) scrollbar styling
+    /* webkit (chrome, safari, etc) scrollbar styling */
     &::-webkit-scrollbar,
     &::-webkit-scrollbar-corner {
         background-color: transparent;
@@ -24,8 +25,8 @@ regular-table {
 
     &::-webkit-scrollbar-thumb {
         background-clip: content-box;
-        background: var(--icon--color);
-        border: 5.5px solid var(--plugin--background);
+        background: var(--psp--color);
+        border: 5.5px solid var(--psp--background-color);
         max-height: 50%;
         max-width: 50%;
         min-width: 10%;

package/src/{less/sub-cell-scroll.less → css/sub-cell-scroll.css}

@@ -1,17 +1,18 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
-// Handles sub-cell scrolling via CSS transform offset by variables set during
-// rendering.
+/* Handles sub-cell scrolling via CSS transform offset by variables set during */
+/* rendering. */
 perspective-viewer-datagrid:not(.sub-cell-scroll-disabled) regular-table table,
 :host(:not(.sub-cell-scroll-disabled)) regular-table table {
     tbody td,

package/src/{less/toolbar.less → css/toolbar.css}

@@ -1,14 +1,15 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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 {
     position: relative;
@@ -42,9 +43,9 @@
 
     &:hover {
         box-shadow:
-            -4px 0 0 var(--icon--color),
-            4px 0 0 var(--icon--color);
-        background-color: var(--icon--color);
+            -4px 0 0 var(--psp--color),
+            4px 0 0 var(--psp--color);
+        background-color: var(--psp--color);
     }
 }
 
@@ -54,11 +55,11 @@
 }
 
 #scroll_lock.lock-scroll:before {
-    -webkit-mask-image: var(--toolbar-scroll-lock-active--content);
+    -webkit-mask-image: var(--psp-toolbar-scroll-lock-active--content);
 }
 
 #scroll_lock:before {
-    -webkit-mask-image: var(--toolbar-scroll-lock--content);
+    -webkit-mask-image: var(--psp-toolbar-scroll-lock--content);
 }
 
 #select_mode:before {
@@ -70,69 +71,86 @@
 }
 
 #edit_mode[data-edit-mode="READ_ONLY"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--read-only--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-read-only--content);
 }
 
 #edit_mode[data-edit-mode="EDIT"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--edit--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-edit--content);
 }
 
 :host(.aggregated) #toolbar #edit_mode[data-edit-mode="EDIT"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--read-only--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-read-only--content);
 }
 
 #edit_mode[data-edit-mode="SELECT_ROW"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--select-row--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-row--content);
 }
 
 #edit_mode[data-edit-mode="SELECT_COLUMN"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--select-column--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-column--content);
 }
 
 #edit_mode[data-edit-mode="SELECT_REGION"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--select-region--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-region--content);
 }
 
-// #edit_mode span:before {
-//     content: var(--edit-mode-toggle--content, "N/A");
-// }
+#edit_mode[data-edit-mode="SELECT_ROW_TREE"]:before {
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-row-tree--content);
+}
+
+/* #edit_mode span:before { */
+/*     content: var(--edit-mode-toggle--content, "N/A"); */
+/* } */
 
 #edit_mode[data-edit-mode="READ_ONLY"] span:before {
-    content: var(--edit-mode--read-only--content, "Read Only");
+    content: var(--psp-label--edit-mode-read-only--content, "Read Only");
 }
 
 #edit_mode[data-edit-mode="EDIT"] span:before {
-    content: var(--edit-mode--edit--content, "Editable");
+    content: var(--psp-label--edit-mode-edit--content, "Editable");
 }
 
 #edit_mode[data-edit-mode="SELECT_ROW"] span:before {
-    content: var(--edit-mode--select-row--content, "Row Select");
+    content: var(--psp-label--edit-mode-select-row--content, "Row Select");
 }
 
 #edit_mode[data-edit-mode="SELECT_COLUMN"] span:before {
-    content: var(--edit-mode--select-column--content, "Column Select");
+    content: var(
+        --psp-label--edit-mode-select-column--content,
+        "Column Select"
+    );
 }
 
 #edit_mode[data-edit-mode="SELECT_REGION"] span:before {
-    content: var(--edit-mode--select-region--content, "Region Select");
+    content: var(
+        --psp-label--edit-mode-select-region--content,
+        "Region Select"
+    );
+}
+
+#edit_mode[data-edit-mode="SELECT_ROW_TREE"] span:before {
+    content: var(
+        --psp-label--edit-mode-select-row-tree--content,
+        "Tree Select"
+    );
 }
 
 #scroll_lock span:before {
-    content: var(--scroll-lock-toggle--content, "Free Scroll");
+    content: var(--psp-label--scroll-lock-toggle--content, "Free Scroll");
 }
 
 #scroll_lock.lock-scroll span:before {
-    content: var(--scroll-lock-alt-toggle--content, "Align Scroll");
+    content: var(--psp-label--scroll-lock-alt-toggle--content, "Align Scroll");
 }
 
-// The icon.
+/* The icon. */
 .button:before {
     width: 21px;
     height: 21px;
     content: "";
     -webkit-mask-size: cover;
     mask-size: cover;
-    background-color: var(--icon--color);
+    background-color: var(--psp--color);
 }
 
 .button.editable:before,
@@ -167,8 +185,8 @@
 .hover-target:focus-within .button,
 .hover-target:hover .button {
     position: relative;
-    background-color: var(--icon--color);
-    color: var(--plugin--background);
+    background-color: var(--psp--color);
+    color: var(--psp--background-color);
     opacity: 1;
     display: flex;
     align-items: center;
@@ -177,10 +195,10 @@
 
 .hover-target:focus-within .button:before,
 .hover-target:hover .button:before {
-    background-color: var(--plugin--background);
+    background-color: var(--psp--background-color);
 }
 
-// The label.
+/* The label. */
 .hover-target:focus-within .button > span,
 .hover-target:hover .button > span {
     display: block;
@@ -194,7 +212,7 @@
     white-space: pre-wrap;
     line-height: 1;
     font-size: 9px;
-    background-color: var(--icon--color);
+    background-color: var(--psp--color);
     width: 35px;
     text-align: center;
     border-radius: 0 0 3px 3px;

package/src/ts/color_utils.ts

@@ -10,15 +10,145 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import chroma from "chroma-js";
 import type { ColorRecord } from "./types.js";
 
+/** 8-bit sRGB color as `[r, g, b]` with each channel in `[0, 255]`. */
+export type RGB = [number, number, number];
+
+/** HSL color as `[h, s, l]` with `h` in degrees `[0, 360)` and `s`, `l` in `[0, 1]`. */
+export type HSL = [number, number, number];
+
+const parse_cache = new Map<string, RGB>();
+let parse_ctx: CanvasRenderingContext2D | null = null;
+
+/** Parse a CSS hex color (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`). Returns `null` if `input` is not a hex literal. Alpha is ignored. */
+function parse_hex(input: string): RGB | null {
+    const s = input.startsWith("#") ? input.slice(1) : input;
+    if (s.length === 3 || s.length === 4) {
+        const r = parseInt(s[0] + s[0], 16);
+        const g = parseInt(s[1] + s[1], 16);
+        const b = parseInt(s[2] + s[2], 16);
+        if (!isNaN(r) && !isNaN(g) && !isNaN(b)) return [r, g, b];
+    } else if (s.length === 6 || s.length === 8) {
+        const r = parseInt(s.slice(0, 2), 16);
+        const g = parseInt(s.slice(2, 4), 16);
+        const b = parseInt(s.slice(4, 6), 16);
+        if (!isNaN(r) && !isNaN(g) && !isNaN(b)) return [r, g, b];
+    }
+    return null;
+}
+
+/** Parse a CSS `rgb()` or `rgba()` functional color. Returns `null` if `input` does not match. Alpha is ignored. */
+function parse_rgb_fn(input: string): RGB | null {
+    const m = input.match(
+        /^rgba?\(\s*([\d.]+)\s*[, ]\s*([\d.]+)\s*[, ]\s*([\d.]+)/i,
+    );
+    if (!m) return null;
+    return [
+        Math.round(parseFloat(m[1])),
+        Math.round(parseFloat(m[2])),
+        Math.round(parseFloat(m[3])),
+    ];
+}
+
+/** Fallback parser that defers to the browser by assigning `input` to a 2D canvas `fillStyle` and re-reading the normalized value. Handles named colors, `hsl()`, etc. Returns `[0, 0, 0]` if the value is invalid or no canvas context is available. */
+function parse_via_canvas(input: string): RGB {
+    if (!parse_ctx) {
+        const canvas = document.createElement("canvas");
+        canvas.width = canvas.height = 1;
+        parse_ctx = canvas.getContext("2d");
+    }
+    if (!parse_ctx) return [0, 0, 0];
+    parse_ctx.fillStyle = "#000";
+    parse_ctx.fillStyle = input;
+    const normalized = parse_ctx.fillStyle as string;
+    return parse_hex(normalized) ?? parse_rgb_fn(normalized) ?? [0, 0, 0];
+}
+
+/** Parse any CSS color string into an `RGB` triple. Tries hex and `rgb()` fast paths, then falls back to a canvas-based parser for named colors, `hsl()`, etc. Results are memoized per input. */
+export function parseColor(input: string): RGB {
+    const key = input.trim();
+    const cached = parse_cache.get(key);
+    if (cached) return cached;
+    const rgb = parse_hex(key) ?? parse_rgb_fn(key) ?? parse_via_canvas(key);
+    parse_cache.set(key, rgb);
+    return rgb;
+}
+
+/** Format a single channel as a clamped, zero-padded two-digit hex byte. */
+function toHex(c: number): string {
+    const v = Math.max(0, Math.min(255, Math.round(c)));
+    return v.toString(16).padStart(2, "0");
+}
+
+/** Format an `RGB` triple as a `#rrggbb` hex string. Channels are clamped to `[0, 255]`. */
+export function rgbToHex([r, g, b]: RGB): string {
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/** Convert sRGB to HSL. Output `h` is in degrees `[0, 360)`; `s` and `l` are in `[0, 1]`. */
+export function rgbToHsl([r, g, b]: RGB): HSL {
+    const rn = r / 255,
+        gn = g / 255,
+        bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    const d = max - min;
+    let h = 0;
+    let s = 0;
+    if (d !== 0) {
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) * 60;
+        else if (max === gn) h = ((bn - rn) / d + 2) * 60;
+        else h = ((rn - gn) / d + 4) * 60;
+    }
+    return [h, s, l];
+}
+
+/** Convert HSL to sRGB. `h` is wrapped into `[0, 360)`; `s` and `l` are expected in `[0, 1]`. Output channels are rounded to integers in `[0, 255]`. */
+export function hslToRgb([h, s, l]: HSL): RGB {
+    const hn = (((h % 360) + 360) % 360) / 360;
+    if (s === 0) {
+        const v = Math.round(l * 255);
+        return [v, v, v];
+    }
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const f = (t: number): number => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1 / 2) return q;
+        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    };
+    return [
+        Math.round(f(hn + 1 / 3) * 255),
+        Math.round(f(hn) * 255),
+        Math.round(f(hn - 1 / 3) * 255),
+    ];
+}
+
+/**
+ * Blend two `RGB` colors using LRGB (gamma-naive linear) interpolation,
+ * matching chroma-js's default `mix` mode. `f` is the weight of `b` in `[0, 1]`
+ * (0 returns `a`, 1 returns `b`).
+ */
+export function mixRgb(a: RGB, b: RGB, f = 0.5): RGB {
+    return [
+        Math.round(Math.sqrt(a[0] * a[0] * (1 - f) + b[0] * b[0] * f)),
+        Math.round(Math.sqrt(a[1] * a[1] * (1 - f) + b[1] * b[1] * f)),
+        Math.round(Math.sqrt(a[2] * a[2] * (1 - f) + b[2] * b[2] * f)),
+    ];
+}
+
+/** 50/50 LRGB blend of CSS color `a` with `RGB`-ish triple `b`, returned as `#rrggbb`. */
 export function blend(a: string, b: number[]): string {
-    return chroma.mix(a, `rgb(${b[0]},${b[1]},${b[2]})`, 0.5).hex();
+    return rgbToHex(mixRgb(parseColor(a), [b[0], b[1], b[2]], 0.5));
 }
 
-// AFAICT `chroma-js` has no alpha-aware blending? So we need a function to get
-// the color of a heatmap cell over the background.
+/** Composite a premultiplied-style `RGBA` cell color over `source` (default white) and return the resulting opaque `RGB`. Used to flatten heatmap cells against the background. */
 export function rgbaToRgb(
     [r, g, b, a]: [number, number, number, number],
     source: [number, number, number] = [255, 255, 255],
@@ -30,7 +160,7 @@ export function rgbaToRgb(
     return [f(0, r), f(1, g), f(2, b)];
 }
 
-// Chroma does this but why bother?
+/** Pick a readable foreground (`#161616` or `#ffffff`) for the given background using a perceptual luminance threshold. */
 export function infer_foreground_from_background([r, g, b]: [
     number,
     number,
@@ -42,21 +172,19 @@ export function infer_foreground_from_background([r, g, b]: [
         : "#ffffff";
 }
 
-function make_gradient(chromahex: chroma.Color): string {
-    const [r, g, b] = chromahex.rgb();
-    const [r1, g1, b1] = chromahex
-        .set("hsl.h", (chromahex.get("hsl.h") - 15) % 360)
-        .rgb();
-    const [r2, g2, b2] = chromahex
-        .set("hsl.h", (chromahex.get("hsl.h") + 15) % 360)
-        .rgb();
+/** Build a CSS `linear-gradient` that fans `rgb` ±15° in hue, used as the negative-value swatch in column color pickers. */
+function make_gradient(rgb: RGB): string {
+    const [h, s, l] = rgbToHsl(rgb);
+    const [r, g, b] = rgb;
+    const [r1, g1, b1] = hslToRgb([h - 15, s, l]);
+    const [r2, g2, b2] = hslToRgb([h + 15, s, l]);
     return `linear-gradient(to right top,rgb(${r1},${g1},${b1}),rgb(${r},${g},${b}) 50%,rgb(${r2},${g2},${b2}))`;
 }
 
+/** Precompute the tuple of derived color strings (RGB channels, gradient, opaque/transparent rgba) cached on the model for a configured plugin color. */
 export function make_color_record(color: string): ColorRecord {
-    const chroma_neg = chroma(color);
-    const _neg_grad = make_gradient(chroma_neg);
-    const rgb = chroma_neg.rgb();
+    const rgb = parseColor(color);
+    const _neg_grad = make_gradient(rgb);
     return [
         color,
         rgb[0],

package/src/ts/custom_elements/datagrid.ts

@@ -22,12 +22,14 @@ import datagridStyles from "../../../dist/css/perspective-viewer-datagrid.css";
 import { format_raw } from "../data_listener/format_cell.js";
 
 import type { View, ViewWindow } from "@perspective-dev/client";
-import type { IPerspectiveViewerPlugin } from "@perspective-dev/viewer";
+import type {
+    HTMLPerspectiveViewerElement,
+    IPerspectiveViewerPlugin,
+} from "@perspective-dev/viewer";
 import type {
     DatagridModel,
     DatagridToolbarElement,
     EditMode,
-    PerspectiveViewerElement,
     DatagridPluginConfig,
     ColumnsConfig,
 } from "../types.js";
@@ -171,7 +173,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
     }
 
     async render(viewport?: ViewWindow): Promise<string> {
-        const viewer = this.parentElement as PerspectiveViewerElement;
+        const viewer = this.parentElement as HTMLPerspectiveViewerElement;
         const view = await viewer.getView();
         const json = await view.to_columns(viewport as any);
         const cols = await view.column_paths(viewport as any);
@@ -210,7 +212,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         return out.trim();
     }
 
-    async resize(): Promise<void> {
+    async resize(_view: View): Promise<void> {
         if (!this.isConnected || this.offsetParent == null) {
             return;
         }
@@ -225,25 +227,22 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         this.regular_table.clear();
     }
 
-    async save(): Promise<any> {
+    save(): any {
         return save.call(this);
     }
 
-    async restore(
-        token: DatagridPluginConfig,
-        columns_config?: ColumnsConfig,
-    ): Promise<any> {
+    restore(token: DatagridPluginConfig, columns_config?: ColumnsConfig): void {
         return restore.call(this, token, columns_config ?? {});
     }
 
-    async restyle(): Promise<void> {
+    async restyle(view: View): Promise<void> {
         // Get view from model if available, otherwise no-op
         if (this.model?._view) {
-            await this.draw(this.model._view);
+            await this.draw(view);
         }
     }
 
-    async delete(): Promise<void> {
+    delete(): void {
         this.disconnectedCallback();
         this._toolbar = undefined;
         if ((this.regular_table as any).table_model) {

package/src/ts/custom_elements/toolbar.ts

@@ -10,12 +10,10 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 import TOOLBAR_STYLE from "../../../dist/css/perspective-viewer-datagrid-toolbar.css";
 import { toggle_edit_mode, toggle_scroll_lock } from "../model/toolbar.js";
-import type {
-    DatagridPluginElement,
-    PerspectiveViewerElement,
-} from "../types.js";
+import type { DatagridPluginElement } from "../types.js";
 
 const stylesheet = new CSSStyleSheet();
 stylesheet.replaceSync(TOOLBAR_STYLE);
@@ -53,7 +51,7 @@ export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement {
             </div>
         `;
 
-        const viewer = this.parentElement as PerspectiveViewerElement;
+        const viewer = this.parentElement as HTMLPerspectiveViewerElement;
         const plugin = this.previousElementSibling as DatagridPluginElement;
 
         plugin._scroll_lock = this.shadowRoot!.querySelector(
@@ -66,6 +64,7 @@ export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement {
         plugin._edit_button = this.shadowRoot!.querySelector(
             "#edit_mode",
         ) as HTMLElement;
+
         plugin._edit_button.addEventListener("click", () => {
             toggle_edit_mode.call(plugin);
             plugin.regular_table.draw();

package/src/ts/data_listener/format_cell.ts

@@ -12,7 +12,7 @@
 
 import { FormatterCache, Formatter } from "./formatter_cache.js";
 import type { DatagridModel, ColumnsConfig, ColumnConfig } from "../types.js";
-import { ColumnType } from "@perspective-dev/client";
+import type { ColumnType } from "@perspective-dev/client";
 
 const FORMAT_CACHE = new FormatterCache();
 const MAX_BAR_WIDTH_PCT = 1;
@@ -44,7 +44,11 @@ export function format_cell(
     const plugin: ColumnConfig = plugins[title] || {};
     const is_numeric = type === "integer" || type === "float";
 
-    if (is_numeric && plugin?.number_fg_mode === "bar") {
+    if (
+        is_numeric &&
+        (plugin?.number_fg_mode === "bar" ||
+            plugin?.number_fg_mode === "label-bar")
+    ) {
         const a = Math.max(
             0,
             Math.min(
@@ -54,15 +58,30 @@ export function format_cell(
             ),
         );
 
-        const div = this._div_factory.get();
-        const anchor = (val as number) >= 0 ? "left" : "right";
+        const anchor = (val as number) >= 0 ? "" : "justify-self:flex-end;";
         const pct = (a * 100).toFixed(2);
-        div.setAttribute(
-            "style",
-            `width:calc(${pct}% - 4px);position:absolute;${anchor}:2px;height:80%;top:10%;pointer-events:none;`,
-        );
 
-        return div;
+        if (plugin.number_fg_mode === "bar") {
+            const div = this._div_factory.get();
+            div.className = "psp-bar";
+            div.setAttribute(
+                "style",
+                `${anchor}width:${pct}%;height:80%;top:10%;pointer-events:none;background:var(--psp-label-bar-color)`,
+            );
+
+            return div;
+        } else {
+            const formatter = FORMAT_CACHE.get(type, plugin);
+            const label = formatter ? formatter.format(val) : (val as string);
+
+            const div = this._div_factory.get();
+            div.className = "psp-bar";
+            div.setAttribute(
+                "style",
+                `--label:"${label}";${anchor}width:${pct}%;height:80%;top:10%;pointer-events:none;background:var(--psp-label-bar-color)`,
+            );
+            return div;
+        }
     } else if (plugin?.format === "link" && type === "string") {
         const anchor = document.createElement("a");
         anchor.setAttribute("href", val as string);

package/src/ts/data_listener/formatter_cache.ts

@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { ColumnType } from "@perspective-dev/client";
+import type { ColumnType } from "@perspective-dev/client";
 import type { ColumnConfig } from "../types.js";
 
 export interface Formatter {