@perspective-dev/viewer 4.0.0

package/src/themes/solarized-dark.less

@@ -0,0 +1,78 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 "icons.less";
+
+@import url("ref://pro-dark.less");
+@import url("ref://solarized.less");
+
+perspective-viewer,
+perspective-viewer[theme="Solarized Dark"] {
+    --theme-name: "Solarized Dark";
+}
+
+perspective-viewer[theme="Solarized Dark"] {
+    @include perspective-viewer-pro-dark--colors;
+    @include perspective-viewer-solarized;
+    @include perspective-viewer-solarized-dark--colors;
+    // @include perspective-viewer-solarized-dark--datagrid;
+    @include perspective-viewer-solarized-dark--d3fc;
+}
+
+perspective-copy-menu[theme="Solarized Dark"],
+perspective-export-menu[theme="Solarized Dark"],
+perspective-dropdown[theme="Solarized Dark"],
+perspective-date-column-style[theme="Solarized Dark"],
+perspective-datetime-column-style[theme="Solarized Dark"],
+perspective-number-column-style[theme="Solarized Dark"],
+perspective-string-column-style[theme="Solarized Dark"] {
+    @include perspective-modal-solarized;
+    @include perspective-viewer-solarized-dark--colors;
+    background-color: #073642;
+}
+
+@mixin perspective-viewer-solarized-dark--colors {
+    color: #93a1a1;
+    background-color: #002b36;
+
+    --inactive--color: #586e75;
+    --inactive--border-color: var(--inactive--color);
+    --plugin--background: #073642;
+
+    --select-arrow--background-image: var(
+        --select-arrow-light--background-image
+    );
+
+    --select-arrow--hover--background-image: var(
+        --select-arrow-dark--background-image
+    );
+}
+
+// @mixin perspective-viewer-solarized-dark--datagrid {}
+
+@mixin perspective-viewer-solarized-dark--d3fc {
+    --d3fc-treedata--labels: white;
+    --d3fc-treedata--hover-highlight: white;
+    --d3fc-axis-ticks--color: #93a1a1;
+    --d3fc-axis--lines: #93a1a1;
+    --d3fc-gridline--color: #002b36;
+    --d3fc-legend--text: #93a1a1;
+
+    --d3fc-full--gradient: linear-gradient(
+        #cb4b16 0%,
+        #073642 50%,
+        #268bd2 100%
+    );
+
+    // --d3fc-positive--gradient: linear-gradient(#073642 0%, #268bd2 100%);
+    --d3fc-negative--gradient: linear-gradient(#cb4b16 0%, #073642 100%);
+}

package/src/themes/solarized.less

@@ -0,0 +1,102 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 "icons.less";
+
+@import url("ref://pro.less");
+
+perspective-viewer,
+perspective-viewer[theme="Solarized"] {
+    --theme-name: "Solarized";
+}
+
+perspective-viewer[theme="Solarized"] {
+    @include perspective-viewer-solarized;
+}
+
+perspective-copy-menu[theme="Solarized"],
+perspective-export-menu[theme="Solarized"],
+perspective-dropdown[theme="Solarized"],
+perspective-date-column-style[theme="Solarized"],
+perspective-datetime-column-style[theme="Solarized"],
+perspective-number-column-style[theme="Solarized"],
+perspective-string-column-style[theme="Solarized"] {
+    @include perspective-modal-solarized;
+}
+
+@mixin perspective-modal-solarized {
+    @include perspective-modal-pro;
+    @include perspective-viewer-solarized--colors;
+
+    background-color: #fdf6e3;
+}
+
+@mixin perspective-viewer-solarized {
+    @include perspective-viewer-pro;
+    @include perspective-viewer-solarized--colors;
+    @include perspective-viewer-solarized--datagrid;
+    @include perspective-viewer-solarized--d3fc;
+}
+
+@mixin perspective-viewer-solarized--colors {
+    color: #586e75;
+    background-color: #eee8d5;
+    --icon--color: #586e75;
+    --active--color: #268bd2;
+    --error--color: #cb4b16;
+    --inactive--color: #93a1a1;
+    --inactive--border-color: var(--inactive--color);
+    --plugin--background: #fdf6e3;
+
+    // Column type indicators
+    --float--column-type--color: #268bd2;
+    --string--column-type--color: #cb4b16;
+    --date--column-type--color: #2aa198;
+    --boolean--column-type--color: #b58900;
+}
+
+@mixin perspective-viewer-solarized--datagrid {
+    --rt-pos-cell--color: #268bd2 !important;
+    --rt-neg-cell--color: #cb4b16 !important;
+    --rt-hover--border-color: #ccc;
+    --rt--border-color: #93a1a1;
+}
+x {
+    color: #cb4b16;
+}
+
+@mixin perspective-viewer-solarized--d3fc {
+    --d3fc-treedata--labels: black;
+    --d3fc-treedata--hover-highlight: black;
+
+    --d3fc-axis-ticks--color: #586e75;
+    --d3fc-gridline--color: #eee8d5;
+    --d3fc-series: #268bd2;
+    --d3fc-series-1: #268bd2;
+    --d3fc-series-2: #cb4b16;
+    --d3fc-series-3: #b58900;
+    --d3fc-series-4: #859900;
+    --d3fc-series-5: #2aa198;
+
+    --d3fc-series-6: #6c71c4;
+    --d3fc-series-7: #d33682;
+
+    --d3fc-positive--gradient: linear-gradient(
+        #268bd2 0%,
+        #2aa198,
+        #859900,
+        #b58900,
+        #cb4b16,
+        #dc322f,
+        #d33682 100%
+    );
+}

package/src/themes/themes.less

@@ -0,0 +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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@import "pro.less";
+@import "pro-dark.less";
+@import "monokai.less";
+@import "solarized.less";
+@import "solarized-dark.less";
+@import "vaporwave.less";
+@import "gruvbox.less";
+@import "gruvbox-dark.less";
+@import "dracula.less";

package/src/themes/vaporwave.less

@@ -0,0 +1,145 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 "icons.less";
+
+@import url("ref://pro-dark.less");
+
+perspective-viewer,
+perspective-viewer[theme="Vaporwave"] {
+    --theme-name: "Vaporwave";
+}
+
+perspective-viewer[theme="Vaporwave"] {
+    @include perspective-viewer-pro-dark;
+    @include perspective-viewer-vaporwave--colors;
+    @include perspective-viewer-vaporwave--animation;
+    @include perspective-viewer-vaporwave--fonts;
+    @include perspective-viewer-vaporwave--datagrid;
+    @include perspective-viewer-vaporwave--d3fc;
+}
+
+perspective-copy-menu[theme="Vaporwave"],
+perspective-export-menu[theme="Vaporwave"],
+perspective-dropdown[theme="Vaporwave"],
+perspective-date-column-style[theme="Vaporwave"],
+perspective-datetime-column-style[theme="Vaporwave"],
+perspective-number-column-style[theme="Vaporwave"],
+perspective-string-column-style[theme="Vaporwave"] {
+    @include perspective-modal-pro-dark;
+    @include perspective-viewer-vaporwave--colors;
+
+    background-color: #07081d;
+}
+
+@mixin perspective-viewer-vaporwave--colors {
+    color: #49acff;
+    background-color: rgb(7, 8, 29) !important;
+    --icon--color: #49acff;
+    --inactive--color: rgb(19, 33, 50) !important;
+    --inactive--border-color: var(--inactive--color);
+    --plugin--background: rgb(7, 8, 29) !important;
+}
+
+@mixin perspective-viewer-vaporwave--animation {
+    --status-icon-updating-keyframes-start--filter: opacity(1);
+    --status-icon-updating-keyframes-end--filter: opacity(0);
+    --status-icon-updating-keyframes-start--transform: scale(1);
+    --status-icon-updating-keyframes-end--transform: scale(0.5);
+    --status-icon-keyframes-start--transform: scale(1.25);
+    --status-icon-keyframes-end--transform: scale(1);
+}
+
+@mixin perspective-viewer-vaporwave--datagrid {
+    --pp-color-1: #092132;
+    --pp-color-2: #42b6e6;
+    --rt-pos-cell--color: #42b6e6 !important;
+    --rt-hover--border-color: var(--pp-color-1) !important;
+
+    // FIXME: broken in shadow DOM.  Can be fixed with a new custom property allowing empty header cell backgrounds
+    // to be styled
+    regular-table table tbody th:empty {
+        background: linear-gradient(
+            to right,
+            transparent 9px,
+            rgb(19, 33, 50) 10px,
+            transparent 11px
+        );
+        background-repeat: no-repeat;
+        background-position: 0px -10px;
+    }
+}
+
+@mixin perspective-viewer-vaporwave--d3fc {
+    --d3fc-axis-ticks--color: #49acff;
+    --d3fc-gridline--color: rgb(19, 33, 50);
+    --d3fc-series: #01cdfe;
+    --d3fc-series-1: #01cdfe;
+    --d3fc-series-2: #ff71ce;
+    --d3fc-series-3: #05ffa1;
+    --d3fc-series-4: #b967ff;
+    --d3fc-series-5: #fffb96;
+
+    --d3fc-series-6: hsl(192, 99%, 25%);
+    --d3fc-series-7: hsl(321, 100%, 36%);
+    --d3fc-series-8: hsl(192, 99%, 25%);
+    --d3fc-series-9: hsl(157, 100%, 25%);
+    --d3fc-series-10: hsl(272, 100%, 35%);
+
+    --d3fc-negative--gradient: linear-gradient(
+        #f3d431,
+        #efb92d,
+        #ed9c25,
+        #eb7e20,
+        #e75d1e,
+        #d14632,
+        #b03e38,
+        #8c3a36,
+        #643633,
+        #07081d
+    ) !important;
+
+    --d3fc-positive--gradient: linear-gradient(
+        #07081d,
+        #2e4463,
+        #1e588a,
+        #086da7,
+        #0082b9,
+        #039ac7,
+        #12b1d4,
+        #2bc8e2,
+        #3ddff0,
+        #61f4fb
+    ) !important;
+
+    --d3fc-full--gradient: linear-gradient(
+        #f3d431,
+        #efb92d,
+        #ed9c25,
+        #eb7e20,
+        #e75d1e,
+        #d14632,
+        #b03e38,
+        #8c3a36,
+        #643633,
+        #07081d,
+        #2e4463,
+        #1e588a,
+        #086da7,
+        #0082b9,
+        #039ac7,
+        #12b1d4,
+        #2bc8e2,
+        #3ddff0,
+        #61f4fb
+    ) !important;
+}

package/src/themes/variables.less

@@ -0,0 +1,24 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@green50: #70c77f;
+
+@grey20: #eaedef;
+@grey60: #c5c9d0;
+@grey200: #61656e;
+@grey300: #4c505b;
+@grey400: #44484f;
+@grey500: #3b3f46;
+@grey600: #2f3136;
+@grey700: #2a2c2f;
+@grey800: #242526;
+@grey900: #161616;

package/src/ts/bootstrap.ts

@@ -0,0 +1,26 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 * as wasm_module from "../../dist/wasm/perspective-viewer.js";
+import { load_wasm_stage_0 } from "@perspective-dev/client/src/ts/wasm/decompress.ts";
+
+export async function init_client(
+    wasm_binary:
+        | Promise<Response | ArrayBuffer | Uint8Array>
+        | Response
+        | ArrayBuffer
+        | Uint8Array,
+) {
+    const module_or_path = await load_wasm_stage_0(wasm_binary);
+    await wasm_module.default({ module_or_path });
+    await wasm_module.init();
+}

package/src/ts/extensions.ts

@@ -0,0 +1,124 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 type { HTMLPerspectiveViewerPluginElement } from "./plugin";
+import { PerspectiveViewerElement } from "../../dist/wasm/perspective-viewer.js";
+import type React from "react";
+import { ViewerConfigUpdate } from "./ts-rs/ViewerConfigUpdate.js";
+import type { ViewWindow } from "@perspective-dev/client";
+
+// JSX / React extensions
+
+export type HTMLPerspectiveViewerElement = PerspectiveViewerElement &
+    PerspectiveViewerElementExt &
+    HTMLElement;
+
+export type PerspectiveClickEventDetail = {
+    config: ViewerConfigUpdate;
+    row: Record<string, any>;
+    column_names: Array<string | Array<string>>;
+};
+
+export type PerspectiveSelectEventDetail = {
+    view_window: ViewWindow;
+};
+
+type ReactPerspectiveViewerAttributes<T> = React.HTMLAttributes<T>;
+
+type JsxPerspectiveViewerElement = { class?: string } & React.DetailedHTMLProps<
+    ReactPerspectiveViewerAttributes<HTMLPerspectiveViewerElement>,
+    HTMLPerspectiveViewerElement
+>;
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "perspective-viewer": JsxPerspectiveViewerElement;
+        }
+    }
+}
+
+// Custom Elements extensions
+
+declare global {
+    interface Document {
+        createElement(
+            tagName: "perspective-viewer",
+            options?: ElementCreationOptions,
+        ): HTMLPerspectiveViewerElement;
+        createElement(
+            tagName: "perspective-viewer-plugin",
+            options?: ElementCreationOptions,
+        ): HTMLPerspectiveViewerPluginElement;
+        querySelector<E extends Element = Element>(selectors: string): E | null;
+        querySelector(
+            selectors: "perspective-viewer",
+        ): HTMLPerspectiveViewerElement | null;
+    }
+
+    interface CustomElementRegistry {
+        get(
+            tagName: "perspective-viewer",
+        ): typeof PerspectiveViewerElement &
+            PerspectiveViewerElementExt &
+            typeof HTMLElement;
+        get(
+            tagName: "perspective-viewer-plugin",
+        ): typeof HTMLPerspectiveViewerPluginElement;
+    }
+}
+
+export interface PerspectiveViewerElementExt {
+    /**
+     * Register a new plugin via its custom element name.  This method is called
+     * automatically as a side effect of importing a plugin module, so this
+     * method should only typically be called by plugin authors.
+     *
+     * @category Plugin
+     * @param name The `name` of the custom element to register, as supplied
+     * to the `customElements.define(name)` method.
+     * @example
+     * ```javascript
+     * customElements.get("perspective-viewer").registerPlugin("my-plugin");
+     * ```
+     */
+    registerPlugin(name: string): Promise<void>;
+
+    addEventListener(
+        name: "perspective-click",
+        cb: (e: CustomEvent) => void,
+        options?: { signal: AbortSignal },
+    ): void;
+
+    addEventListener(
+        name: "perspective-select",
+        cb: (e: CustomEvent) => void,
+        options?: { signal: AbortSignal },
+    ): void;
+
+    addEventListener(
+        name: "perspective-toggle-settings",
+        cb: (e: CustomEvent) => void,
+        options?: { signal: AbortSignal },
+    ): void;
+
+    addEventListener(
+        name: "perspective-config-update",
+        cb: (e: CustomEvent) => void,
+        options?: { signal: AbortSignal },
+    ): void;
+
+    removeEventListener(name: "perspective-click", cb: any): void;
+    removeEventListener(name: "perspective-select", cb: any): void;
+    removeEventListener(name: "perspective-toggle-settings", cb: any): void;
+    removeEventListener(name: "perspective-config-update", cb: any): void;
+}

package/src/ts/perspective-viewer.cdn.ts

@@ -0,0 +1,19 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 perspective_viewer from "./perspective-viewer.ts";
+export * from "./perspective-viewer.ts";
+
+const url = new URL("../wasm/perspective-viewer.wasm", import.meta.url);
+await perspective_viewer.init_client(fetch(url));
+
+export default perspective_viewer;

package/src/ts/perspective-viewer.inline.ts

@@ -0,0 +1,23 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 perspective_viewer from "./perspective-viewer.ts";
+export * from "./perspective-viewer.ts";
+
+// @ts-ignore
+import client_wasm from "../../dist/wasm/perspective-viewer.wasm";
+
+await perspective_viewer.init_client(client_wasm as any as ArrayBuffer);
+
+console.warn("Perspective wasn been initialized in inline mode");
+
+export default perspective_viewer;

package/src/ts/perspective-viewer.ts

@@ -0,0 +1,59 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+/**
+ * Module for the `<perspective-viewer>` custom element.  This module has no
+ * (real) exports, but importing it has a side effect: the
+ * `PerspectiveViewerElement`class is registered as a custom element, after
+ * which it can be used as a standard DOM element.
+ *
+ * Though `<perspective-viewer>` is written mostly in Rust, the nature
+ * of WebAssembly's compilation makes it a dynamic module;  in order to
+ * guarantee that the Custom Elements extension methods are registered
+ * synchronously with this package's import, we need perform said registration
+ * within this wrapper module.  As a result, the API methods of the Custom
+ * Elements are all `async` (as they must await the wasm module instance).
+ *
+ * The documentation in this module defines the instance structure of a
+ * `<perspective-viewer>` DOM object instantiated typically, through HTML or any
+ * relevent DOM method e.g. `document.createElement("perspective-viewer")` or
+ * `document.getElementsByTagName("perspective-viewer")`.
+ *
+ * @module perspective-viewer
+ */
+
+export { IPerspectiveViewerPlugin } from "./plugin";
+export { HTMLPerspectiveViewerPluginElement } from "./plugin";
+import {
+    ExportDropDownMenuElement,
+    CopyDropDownMenuElement,
+} from "../../dist/wasm/perspective-viewer";
+
+export interface HTMLPerspectiveViewerExportMenu
+    extends HTMLElement,
+        ExportDropDownMenuElement {}
+
+export interface HTMLPerspectiveViewerCopyMenu
+    extends HTMLElement,
+        CopyDropDownMenuElement {}
+
+export * from "./extensions";
+export type * from "./ts-rs/ViewerConfigUpdate.d.ts";
+export type * from "./ts-rs/ColumnConfigValues.d.ts";
+export type * from "./ts-rs/Filter.d.ts";
+export type * from "./ts-rs/FilterTerm.d.ts";
+export type * from "./ts-rs/FilterReducer.d.ts";
+
+export { init_client } from "./bootstrap";
+import { init_client } from "./bootstrap";
+
+export default { init_client };