@perspective-dev/workspace 4.0.0

package/src/themes/pro-dark.less

@@ -0,0 +1,139 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@grey60: #c5c9d0;
+@grey500: #3b3f46;
+@grey600: #2f3136;
+@grey700: #2a2c2f;
+@grey800: #242526;
+
+perspective-workspace,
+perspective-workspace[theme="Pro Dark"],
+perspective-indicator[theme="Pro Dark"] {
+    --theme-name: "Pro Dark";
+}
+
+perspective-workspace perspective-viewer {
+    --status-bar--height: 39px;
+}
+
+perspective-workspace perspective-viewer[settings] {
+    --modal-panel--margin: -4px 0 -4px 0;
+    --status-bar--border-radius: 6px 0 0 0;
+    --main-column--margin: 3px 0 3px 3px;
+    --main-column--border: 1px solid var(--inactive--color);
+    --main-column--border-width: 1px 0px 1px 1px;
+    --main-column--border-radius: 6px 0 0 6px;
+    --settings-button--margin: 10px 0 0 0;
+}
+
+perspective-workspace {
+    @include perspective-workspace-pro-base;
+    @include perspective-viewer-pro-dark--colors;
+
+    background-color: #000202;
+    color: white;
+    // --workspace-master--background-color: @grey800;
+    --workspace-tabbar--background-color: @grey800;
+    // --workspace-tabbar--border: 1px solid @grey500;
+    // --workspace-tabbar--border-color: @grey500;
+    --workspace-secondary--color: @grey60;
+    --workspace-tabbar--border: 1px solid var(--inactive--color);
+    --workspace-tabbar--border-width: 0px 1px 1px 1px;
+    --workspace-tabbar--border-radius: 6px;
+    --workspace-tabbar--border-color: var(--inactive--color);
+    --workspace-tabbar-tab--border-width: 1px 1px 0 1px;
+}
+
+perspective-viewer[theme="Pro Dark"].workspace-master-widget {
+    --plugin--background: @grey800;
+}
+
+perspective-workspace-menu {
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
+    font-weight: 300;
+    background: @grey700 !important;
+    color: white !important;
+    border: 1px solid @grey500 !important;
+}
+
+@mixin perspective-workspace-pro-base {
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
+    --open-settings-button--content: "expand_more";
+    --close-settings-button--content: "expand_less";
+    --close-button--content: "\2715";
+    --master-divider--background-color: #243136;
+    --menu-maximize--content: "fullscreen";
+    --menu-minimize--content: "fullscreen_exit";
+    --menu-duplicate--content: "call_split";
+    --menu-master--content: "cast";
+    --menu-detail--content: "notes";
+    --menu-export--content: "file_download";
+    --menu-copy--content: "file_copy";
+    --menu-reset--content: "autorenew";
+    --menu-link--content: "link";
+    --menu-unlink--content: "link_off";
+    --menu-newmenu--content: "add";
+    --menu-close--content: "close";
+    --menu-new--content: "description";
+    --menu-newview--content: "file_copy";
+
+    --workspace-tabbar--border: 1px solid var(--inactive--color);
+    --workspace-tabbar--border-width: 0px 1px 1px 1px;
+    --workspace-tabbar--border-radius: 6px;
+    --workspace-tabbar--border-color: var(--inactive--color);
+    --workspace-tabbar-tab--border-width: 1px 1px 0px 1px;
+
+    // Workspace
+    --column-drag-handle--mask-image: url("../svg/drag-handle.svg");
+    --bookmarks--mask-image: url("../svg/bookmark-icon.svg");
+}
+
+@mixin perspective-viewer-pro-dark--colors {
+    background-color: #242526;
+    --workspace-split-panel-handle--background-color: @grey800;
+    color: white;
+    --icon--color: white;
+    --active--color: #2770a9;
+    --error--color: #ff9485;
+    --inactive--color: #61656e;
+    --inactive--border-color: #4c505b;
+    --plugin--background: #242526;
+    --modal-target--background: rgba(255, 255, 255, 0.05);
+    --active--background: rgba(39, 113, 170, 0.5);
+    --expression--operator-color: #c5c9d0;
+    --expression--function-color: #22a0ce;
+    --expression--error-color: rgb(255, 136, 136);
+    --calendar--filter: invert(1);
+    --warning--color: #242526;
+    --warning--background: var(--icon--color);
+
+    --select-arrow--background-image: var(
+        --select-arrow-light--background-image
+    );
+
+    --select-arrow--hover--background-image: var(
+        --select-arrow-dark--background-image
+    );
+
+    // Syntax
+    --code-editor-symbol--color: white;
+    --code-editor-literal--color: #7dc3f0;
+    --code-editor-operator--color: rgb(23, 166, 123);
+    --code-editor-comment--color: rgb(204, 120, 48);
+    --code-editor-column--color: #e18ee1;
+    // --code-editor-unknown--color: rgb(204, 120, 48);
+}

package/src/themes/pro.less

@@ -0,0 +1,93 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 url("ref://pro.less");
+
+perspective-workspace,
+perspective-workspace[theme="Pro Light"],
+perspective-indicator[theme="Pro Light"] {
+    --theme-name: "Pro Light";
+}
+
+perspective-workspace {
+    @include perspective-workspace-pro-base;
+    @include perspective-viewer-pro--colors;
+    background-color: #dadada;
+}
+
+perspective-workspace perspective-viewer[settings] {
+    --modal-panel--margin: -4px 0 -4px 0;
+    --status-bar--border-radius: 6px 0 0 0;
+    --main-column--margin: 3px 0 3px 3px;
+    --main-column--border: 1px solid var(--inactive--color);
+    --main-column--border-width: 1px 0px 1px 1px;
+    --main-column--border-radius: 6px 0 0 6px;
+    --settings-button--margin: 10px 0 0 0;
+}
+
+perspective-workspace perspective-viewer {
+    --status-bar--height: 39px;
+}
+
+perspective-viewer[theme="Pro Light"].workspace-master-widget {
+    background-color: #f2f4f6;
+    --plugin--background: #f2f4f6;
+    regular-table {
+        td,
+        th {
+            border-color: #e0e4e9;
+        }
+    }
+}
+
+@mixin perspective-workspace-pro-base {
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
+    --open-settings-button--content: "expand_more";
+    --close-settings-button--content: "expand_less";
+    --close-button--content: "\2715";
+    --master-divider--background-color: #243136;
+    --menu-maximize--content: "fullscreen";
+    --menu-minimize--content: "fullscreen_exit";
+    --menu-duplicate--content: "call_split";
+    --menu-master--content: "cast";
+    --menu-detail--content: "notes";
+    --menu-export--content: "file_download";
+    --menu-copy--content: "file_copy";
+    --menu-reset--content: "autorenew";
+    --menu-link--content: "link";
+    --menu-unlink--content: "link_off";
+    --menu-newmenu--content: "add";
+    --menu-close--content: "close";
+    --menu-new--content: "description";
+    --menu-newview--content: "file_copy";
+    --workspace-split-panel-handle--background-color: #f2f4f6;
+
+    --workspace-tabbar--border: 1px solid var(--inactive--color);
+    --workspace-tabbar--border-width: 0px 1px 1px 1px;
+    --workspace-tabbar--border-radius: 6px;
+    --workspace-tabbar--border-color: var(--inactive--color);
+    --workspace-tabbar-tab--border-width: 1px 1px 0px 1px;
+
+    // Workspace
+    --column-drag-handle--mask-image: url("../svg/drag-handle.svg");
+    --bookmarks--mask-image: url("../svg/bookmark-icon.svg");
+}
+
+perspective-workspace-menu {
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
+    font-weight: 300;
+    color: #161616;
+}

package/src/ts/external.d.ts

@@ -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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+declare module "*.css" {
+    const content: string;
+    export default content;
+}
+
+declare module "*.html" {
+    const content: string;
+    export default content;
+}

package/src/ts/external.js

@@ -0,0 +1,11 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

package/src/ts/perspective-workspace.ts

@@ -0,0 +1,306 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { MessageLoop } from "@lumino/messaging";
+import { Widget } from "@lumino/widgets";
+import { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
+import type * as psp from "@perspective-dev/client";
+
+export { PerspectiveWorkspace } from "./workspace";
+export { PerspectiveViewerWidget } from "./workspace/widget";
+
+import "./external";
+import {
+    PerspectiveWorkspace,
+    PerspectiveWorkspaceConfig,
+    ViewerConfigUpdateExt,
+} from "./workspace";
+import { bindTemplate, CustomElementProto } from "./utils/custom_elements";
+import style from "../../build/css/workspace.css";
+import template from "../html/workspace.html";
+
+/**
+ * A Custom Element for coordinating a set of `<perspective-viewer>` light DOM
+ * children.  `<perspective-workspace>` is built on Lumino.js to allow a more
+ * app-like experience than `<perspective-viewer>`, providing
+ * these features additionally:
+ *
+ * - Docking, arranging, tabbing and max/min-ing of `<perspective-viewer>`s.
+ * - Trivial `<perspective-viewer>` duplication.
+ * - Global Filter sidebar, for using selection state of a pivot table to filter
+ *   siblings.
+ * - Total persistence/serializable state and child state.
+ * - Easy sharing/ownership of `Table()` among different `<perspective-viewer>`.
+ * - A cool DOM-reactive API.
+ *
+ * There are a few ways to use this Custom Element.  In plain HTML, you can
+ * express your initial view simply:
+ *
+ * ```html
+ * <perspective-workspace>
+ *     <perspective-viewer
+ *         name="View One"
+ *         table="superstore">
+ *     </perspective-viewer>
+ *     <perspective-viewer
+ *         name="View Two"
+ *         table="superstore">
+ *     </perspective-viewer>
+ * </perspective-workspace>
+ * ```
+ *
+ * You can also use the DOM API in Javascript:
+ *
+ * ```javascript
+ * const workspace = document.createElement("perspective-workspace");
+ * const viewer = document.createElement("perspective-viewer");
+ * workspace.appendChild(viewer);
+ * document.body.appendChild(workspace);
+ * ```
+ *
+ * This will yield a `<perspective-workspace> with the default layout.  To load
+ * a `Table()`, add it to `tables` via the `Map()` API where it will be
+ * auto-wired into all matching `<perspective-viewer>`s immediately:
+ *
+ * ```javascript
+ * workspace.tables.set("superstore", await worker.table(my_data));
+ * ```
+ *
+ *
+ */
+export class HTMLPerspectiveWorkspaceElement extends HTMLElement {
+    private workspace?: PerspectiveWorkspace;
+    private _resize_observer?: ResizeObserver;
+
+    constructor() {
+        super();
+        this.setAutoSize(true);
+    }
+
+    /***************************************************************************
+     *
+     * Public
+     *
+     */
+
+    /**
+     * Persists this `<perspective-workspace>` to a token `Object`.  This object
+     * is JSON serializable and describes the state of the Workspace and it's
+     * child `<perspective-viewer>` elements.  Some important keys:
+     *
+     * - `viewers`: The serialized state of `<perspective-viewer>` children,
+     *   named by `slot`.
+     * - `detail`: The main layout.
+     * - `master`: The contents of the Global Filter sidebar.
+     *
+     * While the `table` attribute is persisted for each `perspective-viewer`,
+     * `Table`s themselves must be added to the `tables` property `Map()`
+     * separately.
+     *
+     * @return {Object} A configuration token, compatible with
+     * `restore(config)`.
+     * @example
+     * // Save this layout to local storage
+     * const workspace = document.querySelector("perspective-workspace");
+     * localStorage.set("CONFIG", JSON.stringify(workspace.save()));
+     */
+    save() {
+        return this.workspace!.save();
+    }
+
+    /**
+     * Restore this `<perspective-workspace>` to a previous state captured by
+     * `save()`.  Calling this method will completely rewrite this element's
+     * `innerHTML`, but may reuse `<perspective-viewer>`  children depending
+     * on the `slot` attribute names.  However, it should always be possible
+     * to recreate any given state from within the UI itself, as the attributes
+     * on `<perspective-viewer>` itself create immutable views.
+     *
+     * While the `table` attribute is set for each `perspective-viewer`,
+     * `Table`s themselves must be added to the `tables` property `Map()`
+     * separately.
+     * @param {Object} config A configuration token, as returned by `save()`.
+     * @example
+     * // Restore this layout from local storage
+     * const workspace = document.querySelector("perspective-workspace");
+     * workspace.restore(JSON.parse(localStorage.get("CONFIG"));
+     *
+     * // Add `Table` separately.
+     * workspace.tables.set("superstore", await worker.table(data));
+     */
+    async restore(layout: PerspectiveWorkspaceConfig<string>) {
+        await this.workspace!.restore(layout);
+    }
+
+    async clear() {
+        await this.restore({
+            sizes: [],
+            master: { sizes: [] },
+            detail: { sizes: [] },
+            viewers: {},
+        });
+    }
+
+    /**
+     * Await all asynchronous tasks for all viewers in this workspace. This is
+     * useful to make sure asynchonous side effects of synchronous methods calls
+     * are applied.
+     */
+    async flush() {
+        await Promise.all(
+            Array.from(this.querySelectorAll("perspective-viewer")).map((x) => {
+                const psp_widget = x as HTMLPerspectiveViewerElement;
+                return psp_widget.flush();
+            }),
+        );
+    }
+
+    /**
+     * Add a new viewer to the workspace for a given `ViewerConfigUpdateExt`.
+     * @param config
+     */
+    async addViewer(config: ViewerConfigUpdateExt) {
+        this.workspace!.addViewer(config);
+        await this.flush();
+    }
+
+    /**
+     * Add a new `Table` to the workspace, so that it can be bound by viewers.
+     * Each `Table` is identified by a unique `name`.
+     */
+    async addTable(name: string, table: Promise<psp.Table>) {
+        this.workspace!.addTable(name, table);
+        await this.flush();
+    }
+
+    /**
+     * Deleta a table by name from this workspace
+     * @param name
+     * @returns
+     */
+    getTable(name: string) {
+        return this.workspace!.getTable(name);
+    }
+
+    /**
+     * Replace a `Table` by name. As `Table` doe snot guarantee the same
+     * structure, this will wipe the viewer's state.
+     * @param name
+     * @param table
+     */
+    async replaceTable(name: string, table: Promise<psp.Table>) {
+        this.workspace!.replaceTable(name, table);
+        await this.flush();
+    }
+
+    /**
+     * Remove a `Table` by name.
+     * @param name
+     * @returns
+     */
+    removeTable(name: string) {
+        return this.workspace!.removeTable(name);
+    }
+
+    /**
+     * A `Map()` of `perspective.Table()` by name.  The names set here will auto
+     * wire any child `perspective-viewer` elements in this Workspace's subtree,
+     * by looking up their respective `table` attribute.
+     *
+     * Calling methods on this `Map()` may have side-effects, as
+     * `PerspectiveViewerHTMLElement.load()` is called when a new `Table()` is
+     * set with a name matching an existing child `perspective-viewer`.
+     *
+     * @readonly
+     * @memberof HTMLPerspectiveWorkspaceElement
+     */
+    get tables() {
+        return this.workspace!.tables;
+    }
+
+    /**
+     * Invalidate this component's dimensions and recalculate.
+     */
+    async resize() {
+        this.workspace!.update();
+        await this.flush();
+    }
+
+    /**
+     * Set whether this workspace element should auto-size itself via a
+     * `ResizeObserver`.
+     */
+    setAutoSize(is_auto_size: boolean) {
+        this._resize_observer?.unobserve(this);
+        this._resize_observer = undefined;
+        if (is_auto_size) {
+            this._resize_observer = new ResizeObserver((...args) =>
+                this.workspace?.update(),
+            );
+
+            this._resize_observer.observe(this);
+        }
+    }
+
+    connectedCallback() {
+        if (!this.workspace) {
+            const container = this.shadowRoot!.querySelector("#container")!;
+            this.workspace = new PerspectiveWorkspace(this);
+            this._register_light_dom_listener();
+            MessageLoop.sendMessage(this.workspace, Widget.Msg.BeforeAttach);
+            container.insertBefore(this.workspace.node, null);
+            MessageLoop.sendMessage(this.workspace, Widget.Msg.AfterAttach);
+        }
+    }
+
+    /***************************************************************************
+     *
+     * Private
+     *
+     */
+
+    private _light_dom_changed() {
+        const viewers = Array.from(
+            this.childNodes,
+        ) as HTMLPerspectiveViewerElement[];
+
+        for (const viewer of viewers) {
+            if (viewer.nodeType !== Node.ELEMENT_NODE) {
+                continue;
+            }
+
+            if (viewer.tagName !== "PERSPECTIVE-VIEWER") {
+                console.warn("Not a <perspective-viewer>");
+                continue;
+            }
+
+            this.workspace!.update_widget_for_viewer(
+                viewer as HTMLPerspectiveViewerElement,
+            );
+        }
+
+        this.workspace!.remove_unslotted_widgets(viewers);
+        this.workspace!.update_details_panel(viewers);
+    }
+
+    private _register_light_dom_listener() {
+        let observer = new MutationObserver(this._light_dom_changed.bind(this));
+        let config = { attributes: false, childList: true, subtree: false };
+        observer.observe(this, config);
+        this._light_dom_changed();
+    }
+}
+
+bindTemplate(
+    template,
+    style,
+)(HTMLPerspectiveWorkspaceElement as unknown as CustomElementProto);

package/src/ts/utils/custom_elements.ts

@@ -0,0 +1,95 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+/**
+ * Instantiate a Template DOM object from an HTML text string.
+ *
+ * Params
+ * ------
+ * template : An HTML string representing a template.
+ *
+ * Returns
+ * -------
+ * A Template DOM object.
+ */
+function importTemplate(template: string): HTMLTemplateElement {
+    const div = document.createElement("div");
+    div.innerHTML = template;
+    return Array.prototype.slice.call(div.children)[0];
+}
+
+export interface CustomElementProto extends CustomElementConstructor {
+    connectedCallback(): void;
+}
+
+/**
+ * A simple tool for creating Web Components v0.
+ *
+ * Params
+ * ------
+ * template : An HTML string representing a template.  Should have an 'id'
+ *     attribute which will become the new Web Component's tag name.
+ * proto : The new Web Component's prototype object, as per spec.
+ */
+export function registerElement(
+    templateString: string,
+    styleString: string,
+    proto: CustomElementProto,
+) {
+    const template = importTemplate(templateString);
+    if (styleString) {
+        template.innerHTML =
+            `<style>${styleString.toString()}</style>` + template.innerHTML;
+    }
+
+    const _perspective_element = class extends proto {
+        private _initialized: boolean;
+        private _initializing: boolean;
+
+        constructor() {
+            super();
+            this._initialized = false;
+            this._initializing = false;
+        }
+
+        connectedCallback() {
+            if (this._initialized) {
+                return;
+            }
+
+            this._initializing = true;
+            const node = document.importNode(template.content, true);
+            const root = this.attachShadow({ mode: "open" });
+            root.appendChild(node);
+            if (proto.prototype.connectedCallback) {
+                proto.prototype.connectedCallback.call(this);
+            }
+
+            this._initializing = false;
+            this._initialized = true;
+        }
+
+        static get observedAttributes() {
+            return Object.getOwnPropertyNames(proto.prototype);
+        }
+    };
+
+    let name = template.getAttribute("id")!;
+    window.customElements.define(name, _perspective_element);
+}
+
+export function bindTemplate(template: string, ...styleStrings: string[]) {
+    const style = styleStrings.map((x) => x.toString()).join("\n");
+    return function (cls: CustomElementProto) {
+        return registerElement(template, style, cls);
+    };
+}