@perspective-dev/react 4.0.1 → 4.1.1

package/dist/esm/index.d.ts

@@ -7,24 +7,5 @@
  *
  * @module
  */
-import * as React from "react";
-import type * as psp from "@perspective-dev/client";
-import type * as pspViewer from "@perspective-dev/viewer";
-export interface PerspectiveViewerProps {
-    table?: psp.Table | Promise<psp.Table>;
-    config?: pspViewer.ViewerConfigUpdate;
-    onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;
-    onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;
-    onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;
-    className?: string | undefined;
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    tabIndex?: number | undefined;
-    title?: string | undefined;
-}
-/**
- * A React wrapper component for `<perspective-viewer>` Custom Element.
- */
-export declare const PerspectiveViewer: React.FC<PerspectiveViewerProps>;
+export * from "./viewer";
+export * from "./workspace";

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-import*as i from"react";import{jsx as d}from"react/jsx-runtime";function c(e,t,n){i.useEffect(()=>{if(!n)return;let s=new AbortController,a=l=>n(l.detail);return e?.addEventListener(t,a,{signal:s.signal}),()=>s.abort()},[e,n])}function r(e){let[t,n]=i.useState(null);return i.useEffect(()=>()=>{t?.delete()},[t]),i.useEffect(()=>{e.table?t?.load(e.table):t?.eject()},[t,e.table]),i.useEffect(()=>{e.table&&e.config&&t?.restore(e.config)},[t,e.table,JSON.stringify(e.config)]),c(t,"perspective-click",e.onClick),c(t,"perspective-select",e.onSelect),c(t,"perspective-config-update",e.onConfigUpdate),d("perspective-viewer",{ref:n,id:e.id,className:e.className,hidden:e.hidden,slot:e.slot,style:e.style,tabIndex:e.tabIndex,title:e.title})}var o=i.memo(r);export{o as PerspectiveViewer};
+import*as o from"react";import*as d from"react";function n(e,t,s){d.useEffect(()=>{if(!s||!e)return;let p=new AbortController,c=a=>s(a.detail);return e?.addEventListener(t,c,{signal:p.signal}),()=>p.abort()},[e,s])}import{jsx as g}from"react/jsx-runtime";function m(e){let[t,s]=o.useState(null);return o.useEffect(()=>()=>{t?.delete()},[t]),o.useEffect(()=>{e.client?t?.load(e.client):t?.eject()},[t,e.client]),o.useEffect(()=>{e.client&&e.config&&t?.restore(e.config)},[t,e.client,JSON.stringify(e.config)]),n(t,"perspective-click",e.onClick),n(t,"perspective-select",e.onSelect),n(t,"perspective-config-update",e.onConfigUpdate),g("perspective-viewer",{ref:s,id:e.id,className:e.className,hidden:e.hidden,slot:e.slot,style:e.style,tabIndex:e.tabIndex,title:e.title})}var C=o.memo(m);import*as r from"react";import{jsx as k}from"react/jsx-runtime";var P=r.forwardRef(({client:e,layout:t,onLayoutUpdate:s,onNewView:p,onToggleGlobalFilter:c,...a},f)=>{let[i,v]=r.useState();return r.useImperativeHandle(f,()=>i,[i]),r.useEffect(()=>{i&&t&&i.restore(t)},[i,t]),r.useEffect(()=>{i&&e&&i.load(e)},[i,e]),n(i,"workspace-new-view",p),n(i,"workspace-layout-update",s?({layout:l})=>i?.save().then(u=>s(u)):void 0),n(i,"workspace-toggle-global-filter",c),k("perspective-workspace",{ref:l=>v(l??void 0),...a})}),W=r.memo(P);export{C as PerspectiveViewer,W as PerspectiveWorkspace};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["// \u250F\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\n// \u2503 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588       \u2588      \u2588      \u2588      \u2588      \u2588 \u2588\u2584  \u2580\u2588\u2588\u2588 \u2588       \u2503\n// \u2503 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2584\u2584\u2584\u2584\u2584 \u2584\u2584\u2584\u2584\u2584\u2588  \u2580\u2580\u2580\u2580\u2580\u2588\u2580\u2580\u2580\u2580\u2580 \u2588 \u2580\u2580\u2580\u2580\u2580\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2584  \u2580\u2588 \u2588 \u2580\u2580\u2580\u2580\u2580 \u2503\n// \u2503 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2588\u2588\u2580\u2580 \u2584\u2584\u2584\u2584\u2584 \u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2584   \u2588 \u2584\u2584\u2584\u2584\u2584 \u2503\n// \u2503 \u2588      \u2588\u2588\u2588\u2588\u2588\u2588 \u2588  \u2580\u2588\u2584       \u2588 \u2588\u2588\u2588\u2588\u2588\u2588      \u2588      \u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2584 \u2588       \u2503\n// \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252B\n// \u2503 Copyright (c) 2017, the Perspective Authors.                              \u2503\n// \u2503 \u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C \u2503\n// \u2503 This file is part of the Perspective library, distributed under the terms \u2503\n// \u2503 of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). \u2503\n// \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251B\n\n/**\n *\n * # See Also\n *\n * [`react-example`](https://github.com/perspective-dev/perspective/tree/master/examples/react-example)\n * project from the Perspective GitHub repo.\n *\n * @module\n */\n\nimport * as React from \"react\";\nimport type * as psp from \"@perspective-dev/client\";\nimport type * as pspViewer from \"@perspective-dev/viewer\";\n\nfunction usePspListener<A>(\n    viewer: HTMLElement | null,\n    name: string,\n    f?: (x: A) => void,\n) {\n    React.useEffect(() => {\n        if (!f) return;\n        const ctx = new AbortController();\n        const callback = (e: Event) => f((e as CustomEvent).detail);\n        viewer?.addEventListener(name, callback, { signal: ctx.signal });\n        return () => ctx.abort();\n    }, [viewer, f]);\n}\n\nexport interface PerspectiveViewerProps {\n    table?: psp.Table | Promise<psp.Table>;\n    config?: pspViewer.ViewerConfigUpdate;\n    onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;\n    onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;\n    onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;\n\n    // Applicable props from `React.HTMLAttributes`, which we cannot extend\n    // directly because Perspective changes the signature of `onClick`.\n    className?: string | undefined;\n    hidden?: boolean | undefined;\n    id?: string | undefined;\n    slot?: string | undefined;\n    style?: React.CSSProperties | undefined;\n    tabIndex?: number | undefined;\n    title?: string | undefined;\n}\n\nfunction PerspectiveViewerImpl(props: PerspectiveViewerProps) {\n    const [viewer, setViewer] =\n        React.useState<pspViewer.HTMLPerspectiveViewerElement | null>(null);\n\n    React.useEffect(() => {\n        return () => {\n            viewer?.delete();\n        };\n    }, [viewer]);\n\n    React.useEffect(() => {\n        if (props.table) {\n            viewer?.load(props.table);\n        } else {\n            viewer?.eject();\n        }\n    }, [viewer, props.table]);\n\n    React.useEffect(() => {\n        if (props.table && props.config) {\n            viewer?.restore(props.config);\n        }\n    }, [viewer, props.table, JSON.stringify(props.config)]);\n\n    usePspListener(viewer, \"perspective-click\", props.onClick);\n    usePspListener(viewer, \"perspective-select\", props.onSelect);\n    usePspListener(viewer, \"perspective-config-update\", props.onConfigUpdate);\n\n    return (\n        <perspective-viewer\n            ref={setViewer}\n            id={props.id}\n            className={props.className}\n            hidden={props.hidden}\n            slot={props.slot}\n            style={props.style}\n            tabIndex={props.tabIndex}\n            title={props.title}\n        />\n    );\n}\n\n/**\n * A React wrapper component for `<perspective-viewer>` Custom Element.\n */\nexport const PerspectiveViewer: React.FC<PerspectiveViewerProps> = React.memo(\n    PerspectiveViewerImpl,\n);\n"],
-  "mappings": "AAsBA,UAAYA,MAAW,QAiEf,cAAAC,MAAA,oBA7DR,SAASC,EACLC,EACAC,EACAC,EACF,CACQ,YAAU,IAAM,CAClB,GAAI,CAACA,EAAG,OACR,IAAMC,EAAM,IAAI,gBACVC,EAAYC,GAAaH,EAAGG,EAAkB,MAAM,EAC1D,OAAAL,GAAQ,iBAAiBC,EAAMG,EAAU,CAAE,OAAQD,EAAI,MAAO,CAAC,EACxD,IAAMA,EAAI,MAAM,CAC3B,EAAG,CAACH,EAAQE,CAAC,CAAC,CAClB,CAoBA,SAASI,EAAsBC,EAA+B,CAC1D,GAAM,CAACP,EAAQQ,CAAS,EACd,WAAwD,IAAI,EAEtE,OAAM,YAAU,IACL,IAAM,CACTR,GAAQ,OAAO,CACnB,EACD,CAACA,CAAM,CAAC,EAEL,YAAU,IAAM,CACdO,EAAM,MACNP,GAAQ,KAAKO,EAAM,KAAK,EAExBP,GAAQ,MAAM,CAEtB,EAAG,CAACA,EAAQO,EAAM,KAAK,CAAC,EAElB,YAAU,IAAM,CACdA,EAAM,OAASA,EAAM,QACrBP,GAAQ,QAAQO,EAAM,MAAM,CAEpC,EAAG,CAACP,EAAQO,EAAM,MAAO,KAAK,UAAUA,EAAM,MAAM,CAAC,CAAC,EAEtDR,EAAeC,EAAQ,oBAAqBO,EAAM,OAAO,EACzDR,EAAeC,EAAQ,qBAAsBO,EAAM,QAAQ,EAC3DR,EAAeC,EAAQ,4BAA6BO,EAAM,cAAc,EAGpET,EAAC,sBACG,IAAKU,EACL,GAAID,EAAM,GACV,UAAWA,EAAM,UACjB,OAAQA,EAAM,OACd,KAAMA,EAAM,KACZ,MAAOA,EAAM,MACb,SAAUA,EAAM,SAChB,MAAOA,EAAM,MACjB,CAER,CAKO,IAAME,EAA4D,OACrEH,CACJ",
-  "names": ["React", "jsx", "usePspListener", "viewer", "name", "f", "ctx", "callback", "e", "PerspectiveViewerImpl", "props", "setViewer", "PerspectiveViewer"]
+  "sources": ["../../src/viewer.tsx", "../../src/utils.tsx", "../../src/workspace.tsx"],
+  "sourcesContent": ["// \u250F\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\n// \u2503 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588       \u2588      \u2588      \u2588      \u2588      \u2588 \u2588\u2584  \u2580\u2588\u2588\u2588 \u2588       \u2503\n// \u2503 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2584\u2584\u2584\u2584\u2584 \u2584\u2584\u2584\u2584\u2584\u2588  \u2580\u2580\u2580\u2580\u2580\u2588\u2580\u2580\u2580\u2580\u2580 \u2588 \u2580\u2580\u2580\u2580\u2580\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2584  \u2580\u2588 \u2588 \u2580\u2580\u2580\u2580\u2580 \u2503\n// \u2503 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2588\u2588\u2580\u2580 \u2584\u2584\u2584\u2584\u2584 \u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2584   \u2588 \u2584\u2584\u2584\u2584\u2584 \u2503\n// \u2503 \u2588      \u2588\u2588\u2588\u2588\u2588\u2588 \u2588  \u2580\u2588\u2584       \u2588 \u2588\u2588\u2588\u2588\u2588\u2588      \u2588      \u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2584 \u2588       \u2503\n// \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252B\n// \u2503 Copyright (c) 2017, the Perspective Authors.                              \u2503\n// \u2503 \u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C \u2503\n// \u2503 This file is part of the Perspective library, distributed under the terms \u2503\n// \u2503 of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). \u2503\n// \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251B\n\nimport * as React from \"react\";\nimport type * as psp from \"@perspective-dev/client\";\nimport type * as pspViewer from \"@perspective-dev/viewer\";\nimport { usePspListener } from \"./utils\";\n\nfunction PerspectiveViewerImpl(props: PerspectiveViewerProps) {\n    const [viewer, setViewer] =\n        React.useState<pspViewer.HTMLPerspectiveViewerElement | null>(null);\n\n    React.useEffect(() => {\n        return () => {\n            viewer?.delete();\n        };\n    }, [viewer]);\n\n    React.useEffect(() => {\n        if (props.client) {\n            viewer?.load(props.client);\n        } else {\n            viewer?.eject();\n        }\n    }, [viewer, props.client]);\n\n    React.useEffect(() => {\n        if (props.client && props.config) {\n            viewer?.restore(props.config);\n        }\n    }, [viewer, props.client, JSON.stringify(props.config)]);\n\n    usePspListener(viewer, \"perspective-click\", props.onClick);\n    usePspListener(viewer, \"perspective-select\", props.onSelect);\n    usePspListener(viewer, \"perspective-config-update\", props.onConfigUpdate);\n\n    return (\n        <perspective-viewer\n            ref={setViewer}\n            id={props.id}\n            className={props.className}\n            hidden={props.hidden}\n            slot={props.slot}\n            style={props.style}\n            tabIndex={props.tabIndex}\n            title={props.title}\n        />\n    );\n}\n\n/**\n * Props for the `<PerspectiveViewer>` component.\n */\nexport interface PerspectiveViewerProps {\n    client?: psp.Client | Promise<psp.Client> | psp.Table | Promise<psp.Table>;\n    config?: pspViewer.ViewerConfigUpdate;\n    onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;\n    onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;\n    onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;\n\n    // Applicable props from `React.HTMLAttributes`, which we cannot extend\n    // directly because Perspective changes the signature of `onClick`.\n    className?: string | undefined;\n    hidden?: boolean | undefined;\n    id?: string | undefined;\n    slot?: string | undefined;\n    style?: React.CSSProperties | undefined;\n    tabIndex?: number | undefined;\n    title?: string | undefined;\n}\n\n/**\n * A React wrapper component for `<perspective-viewer>` Custom Element.\n */\nexport const PerspectiveViewer: React.FC<PerspectiveViewerProps> = React.memo(\n    PerspectiveViewerImpl,\n);\n", "// \u250F\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\n// \u2503 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588       \u2588      \u2588      \u2588      \u2588      \u2588 \u2588\u2584  \u2580\u2588\u2588\u2588 \u2588       \u2503\n// \u2503 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2584\u2584\u2584\u2584\u2584 \u2584\u2584\u2584\u2584\u2584\u2588  \u2580\u2580\u2580\u2580\u2580\u2588\u2580\u2580\u2580\u2580\u2580 \u2588 \u2580\u2580\u2580\u2580\u2580\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2584  \u2580\u2588 \u2588 \u2580\u2580\u2580\u2580\u2580 \u2503\n// \u2503 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2588\u2588\u2580\u2580 \u2584\u2584\u2584\u2584\u2584 \u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2584   \u2588 \u2584\u2584\u2584\u2584\u2584 \u2503\n// \u2503 \u2588      \u2588\u2588\u2588\u2588\u2588\u2588 \u2588  \u2580\u2588\u2584       \u2588 \u2588\u2588\u2588\u2588\u2588\u2588      \u2588      \u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2584 \u2588       \u2503\n// \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252B\n// \u2503 Copyright (c) 2017, the Perspective Authors.                              \u2503\n// \u2503 \u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C \u2503\n// \u2503 This file is part of the Perspective library, distributed under the terms \u2503\n// \u2503 of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). \u2503\n// \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251B\n\nimport * as React from \"react\";\n\nexport function usePspListener<A>(\n    el: HTMLElement | undefined | null,\n    event: string,\n    cb?: (x: A) => void,\n) {\n    React.useEffect(() => {\n        if (!cb || !el) return;\n        const ctx = new AbortController();\n        const callback = (e: Event) => cb((e as CustomEvent).detail);\n        el?.addEventListener(event, callback, { signal: ctx.signal });\n        return () => ctx.abort();\n    }, [el, cb]);\n}\n", "// \u250F\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\n// \u2503 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588       \u2588      \u2588      \u2588      \u2588      \u2588 \u2588\u2584  \u2580\u2588\u2588\u2588 \u2588       \u2503\n// \u2503 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2584\u2584\u2584\u2584\u2584 \u2584\u2584\u2584\u2584\u2584\u2588  \u2580\u2580\u2580\u2580\u2580\u2588\u2580\u2580\u2580\u2580\u2580 \u2588 \u2580\u2580\u2580\u2580\u2580\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2584  \u2580\u2588 \u2588 \u2580\u2580\u2580\u2580\u2580 \u2503\n// \u2503 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2588\u2588\u2580\u2580 \u2584\u2584\u2584\u2584\u2584 \u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2584   \u2588 \u2584\u2584\u2584\u2584\u2584 \u2503\n// \u2503 \u2588      \u2588\u2588\u2588\u2588\u2588\u2588 \u2588  \u2580\u2588\u2584       \u2588 \u2588\u2588\u2588\u2588\u2588\u2588      \u2588      \u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2584 \u2588       \u2503\n// \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252B\n// \u2503 Copyright (c) 2017, the Perspective Authors.                              \u2503\n// \u2503 \u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C \u2503\n// \u2503 This file is part of the Perspective library, distributed under the terms \u2503\n// \u2503 of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). \u2503\n// \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251B\n\nimport type * as psp from \"@perspective-dev/client\";\nimport type * as psp_viewer from \"@perspective-dev/viewer\";\nimport type * as pspWorkspace from \"@perspective-dev/workspace\";\nimport { PerspectiveWorkspaceConfig } from \"@perspective-dev/workspace\";\nimport * as utils from \"./utils\";\nimport * as React from \"react\";\n\nexport interface NewViewEventDetail {\n    config: psp_viewer.ViewerConfigUpdate;\n    widget: pspWorkspace.PerspectiveViewerWidget;\n}\n\nexport interface ToggleGloalFilterEventDetail {\n    widget: pspWorkspace.PerspectiveViewerWidget;\n    isGlobalFilter: boolean;\n}\n\ninterface PerspectiveWorkspaceProps extends React.HTMLAttributes<HTMLElement> {\n    client: psp.Client | Promise<psp.Client>;\n    layout: PerspectiveWorkspaceConfig;\n    onLayoutUpdate?: (layout: PerspectiveWorkspaceConfig) => void;\n    onNewView?: (detail: NewViewEventDetail) => void;\n    onToggleGlobalFilter?: (detail: ToggleGloalFilterEventDetail) => void;\n}\n\nconst PerspectiveWorkspaceImpl = React.forwardRef<\n    pspWorkspace.HTMLPerspectiveWorkspaceElement | undefined,\n    PerspectiveWorkspaceProps\n>(\n    (\n        {\n            client,\n            layout,\n            onLayoutUpdate,\n            onNewView,\n            onToggleGlobalFilter,\n            ...htmlAttributes\n        },\n        ref,\n    ) => {\n        const [workspace, setWorkspace] =\n            React.useState<pspWorkspace.HTMLPerspectiveWorkspaceElement>();\n\n        React.useImperativeHandle(ref, () => workspace, [workspace]);\n        React.useEffect(() => {\n            if (workspace && layout) {\n                workspace.restore(layout);\n            }\n        }, [workspace, layout]);\n\n        React.useEffect(() => {\n            if (workspace && client) {\n                workspace.load(client);\n            }\n        }, [workspace, client]);\n\n        utils.usePspListener(workspace, \"workspace-new-view\", onNewView);\n        utils.usePspListener(\n            workspace,\n            \"workspace-layout-update\",\n            onLayoutUpdate\n                ? ({ layout }: { layout: PerspectiveWorkspaceConfig }) =>\n                      workspace?.save().then((x) => onLayoutUpdate(x))\n                : undefined,\n        );\n\n        utils.usePspListener(\n            workspace,\n            \"workspace-toggle-global-filter\",\n            onToggleGlobalFilter,\n        );\n\n        return (\n            <perspective-workspace\n                ref={(r) => setWorkspace(r ?? undefined)}\n                {...htmlAttributes}\n            ></perspective-workspace>\n        );\n    },\n);\n\nexport const PerspectiveWorkspace = React.memo(PerspectiveWorkspaceImpl);\n"],
+  "mappings": "AAYA,UAAYA,MAAW,QCAvB,UAAYC,MAAW,QAEhB,SAASC,EACZC,EACAC,EACAC,EACF,CACQ,YAAU,IAAM,CAClB,GAAI,CAACA,GAAM,CAACF,EAAI,OAChB,IAAMG,EAAM,IAAI,gBACVC,EAAYC,GAAaH,EAAIG,EAAkB,MAAM,EAC3D,OAAAL,GAAI,iBAAiBC,EAAOG,EAAU,CAAE,OAAQD,EAAI,MAAO,CAAC,EACrD,IAAMA,EAAI,MAAM,CAC3B,EAAG,CAACH,EAAIE,CAAE,CAAC,CACf,CDoBQ,cAAAI,MAAA,oBA7BR,SAASC,EAAsBC,EAA+B,CAC1D,GAAM,CAACC,EAAQC,CAAS,EACd,WAAwD,IAAI,EAEtE,OAAM,YAAU,IACL,IAAM,CACTD,GAAQ,OAAO,CACnB,EACD,CAACA,CAAM,CAAC,EAEL,YAAU,IAAM,CACdD,EAAM,OACNC,GAAQ,KAAKD,EAAM,MAAM,EAEzBC,GAAQ,MAAM,CAEtB,EAAG,CAACA,EAAQD,EAAM,MAAM,CAAC,EAEnB,YAAU,IAAM,CACdA,EAAM,QAAUA,EAAM,QACtBC,GAAQ,QAAQD,EAAM,MAAM,CAEpC,EAAG,CAACC,EAAQD,EAAM,OAAQ,KAAK,UAAUA,EAAM,MAAM,CAAC,CAAC,EAEvDG,EAAeF,EAAQ,oBAAqBD,EAAM,OAAO,EACzDG,EAAeF,EAAQ,qBAAsBD,EAAM,QAAQ,EAC3DG,EAAeF,EAAQ,4BAA6BD,EAAM,cAAc,EAGpEF,EAAC,sBACG,IAAKI,EACL,GAAIF,EAAM,GACV,UAAWA,EAAM,UACjB,OAAQA,EAAM,OACd,KAAMA,EAAM,KACZ,MAAOA,EAAM,MACb,SAAUA,EAAM,SAChB,MAAOA,EAAM,MACjB,CAER,CA0BO,IAAMI,EAA4D,OACrEL,CACJ,EEpEA,UAAYM,MAAW,QAoEX,cAAAC,MAAA,oBAhDZ,IAAMC,EAAiC,aAInC,CACI,CACI,OAAAC,EACA,OAAAC,EACA,eAAAC,EACA,UAAAC,EACA,qBAAAC,EACA,GAAGC,CACP,EACAC,IACC,CACD,GAAM,CAACC,EAAWC,CAAY,EACpB,WAAuD,EAEjE,OAAM,sBAAoBF,EAAK,IAAMC,EAAW,CAACA,CAAS,CAAC,EACrD,YAAU,IAAM,CACdA,GAAaN,GACbM,EAAU,QAAQN,CAAM,CAEhC,EAAG,CAACM,EAAWN,CAAM,CAAC,EAEhB,YAAU,IAAM,CACdM,GAAaP,GACbO,EAAU,KAAKP,CAAM,CAE7B,EAAG,CAACO,EAAWP,CAAM,CAAC,EAEhBS,EAAeF,EAAW,qBAAsBJ,CAAS,EACzDM,EACFF,EACA,0BACAL,EACM,CAAC,CAAE,OAAAD,CAAO,IACNM,GAAW,KAAK,EAAE,KAAMG,GAAMR,EAAeQ,CAAC,CAAC,EACnD,MACV,EAEMD,EACFF,EACA,iCACAH,CACJ,EAGIN,EAAC,yBACG,IAAMa,GAAMH,EAAaG,GAAK,MAAS,EACtC,GAAGN,EACP,CAET,CACJ,EAEaO,EAA6B,OAAKb,CAAwB",
+  "names": ["React", "React", "usePspListener", "el", "event", "cb", "ctx", "callback", "e", "jsx", "PerspectiveViewerImpl", "props", "viewer", "setViewer", "usePspListener", "PerspectiveViewer", "React", "jsx", "PerspectiveWorkspaceImpl", "client", "layout", "onLayoutUpdate", "onNewView", "onToggleGlobalFilter", "htmlAttributes", "ref", "workspace", "setWorkspace", "usePspListener", "x", "r", "PerspectiveWorkspace"]
 }

package/dist/esm/utils.d.ts

@@ -0,0 +1 @@
+export declare function usePspListener<A>(el: HTMLElement | undefined | null, event: string, cb?: (x: A) => void): void;

package/dist/esm/viewer.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import type * as psp from "@perspective-dev/client";
+import type * as pspViewer from "@perspective-dev/viewer";
+/**
+ * Props for the `<PerspectiveViewer>` component.
+ */
+export interface PerspectiveViewerProps {
+    client?: psp.Client | Promise<psp.Client> | psp.Table | Promise<psp.Table>;
+    config?: pspViewer.ViewerConfigUpdate;
+    onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;
+    onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;
+    onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;
+    className?: string | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    slot?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+}
+/**
+ * A React wrapper component for `<perspective-viewer>` Custom Element.
+ */
+export declare const PerspectiveViewer: React.FC<PerspectiveViewerProps>;

package/dist/esm/workspace.d.ts

@@ -0,0 +1,22 @@
+import type * as psp from "@perspective-dev/client";
+import type * as psp_viewer from "@perspective-dev/viewer";
+import type * as pspWorkspace from "@perspective-dev/workspace";
+import { PerspectiveWorkspaceConfig } from "@perspective-dev/workspace";
+import * as React from "react";
+export interface NewViewEventDetail {
+    config: psp_viewer.ViewerConfigUpdate;
+    widget: pspWorkspace.PerspectiveViewerWidget;
+}
+export interface ToggleGloalFilterEventDetail {
+    widget: pspWorkspace.PerspectiveViewerWidget;
+    isGlobalFilter: boolean;
+}
+interface PerspectiveWorkspaceProps extends React.HTMLAttributes<HTMLElement> {
+    client: psp.Client | Promise<psp.Client>;
+    layout: PerspectiveWorkspaceConfig;
+    onLayoutUpdate?: (layout: PerspectiveWorkspaceConfig) => void;
+    onNewView?: (detail: NewViewEventDetail) => void;
+    onToggleGlobalFilter?: (detail: ToggleGloalFilterEventDetail) => void;
+}
+export declare const PerspectiveWorkspace: React.MemoExoticComponent<React.ForwardRefExoticComponent<PerspectiveWorkspaceProps & React.RefAttributes<pspWorkspace.HTMLPerspectiveWorkspaceElement | undefined>>>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/react",
-  "version": "4.0.1",
+  "version": "4.1.1",
   "description": "",
   "main": "index.js",
   "keywords": [],
@@ -16,6 +16,7 @@
   "dependencies": {
     "@perspective-dev/client": "",
     "@perspective-dev/viewer": "",
+    "@perspective-dev/workspace": "",
     "@types/react": "^18",
     "react": "^18",
     "react-dom": "^18"

package/src/index.tsx

@@ -20,87 +20,5 @@
  * @module
  */
 
-import * as React from "react";
-import type * as psp from "@perspective-dev/client";
-import type * as pspViewer from "@perspective-dev/viewer";
-
-function usePspListener<A>(
-    viewer: HTMLElement | null,
-    name: string,
-    f?: (x: A) => void,
-) {
-    React.useEffect(() => {
-        if (!f) return;
-        const ctx = new AbortController();
-        const callback = (e: Event) => f((e as CustomEvent).detail);
-        viewer?.addEventListener(name, callback, { signal: ctx.signal });
-        return () => ctx.abort();
-    }, [viewer, f]);
-}
-
-export interface PerspectiveViewerProps {
-    table?: psp.Table | Promise<psp.Table>;
-    config?: pspViewer.ViewerConfigUpdate;
-    onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;
-    onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;
-    onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;
-
-    // Applicable props from `React.HTMLAttributes`, which we cannot extend
-    // directly because Perspective changes the signature of `onClick`.
-    className?: string | undefined;
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    tabIndex?: number | undefined;
-    title?: string | undefined;
-}
-
-function PerspectiveViewerImpl(props: PerspectiveViewerProps) {
-    const [viewer, setViewer] =
-        React.useState<pspViewer.HTMLPerspectiveViewerElement | null>(null);
-
-    React.useEffect(() => {
-        return () => {
-            viewer?.delete();
-        };
-    }, [viewer]);
-
-    React.useEffect(() => {
-        if (props.table) {
-            viewer?.load(props.table);
-        } else {
-            viewer?.eject();
-        }
-    }, [viewer, props.table]);
-
-    React.useEffect(() => {
-        if (props.table && props.config) {
-            viewer?.restore(props.config);
-        }
-    }, [viewer, props.table, JSON.stringify(props.config)]);
-
-    usePspListener(viewer, "perspective-click", props.onClick);
-    usePspListener(viewer, "perspective-select", props.onSelect);
-    usePspListener(viewer, "perspective-config-update", props.onConfigUpdate);
-
-    return (
-        <perspective-viewer
-            ref={setViewer}
-            id={props.id}
-            className={props.className}
-            hidden={props.hidden}
-            slot={props.slot}
-            style={props.style}
-            tabIndex={props.tabIndex}
-            title={props.title}
-        />
-    );
-}
-
-/**
- * A React wrapper component for `<perspective-viewer>` Custom Element.
- */
-export const PerspectiveViewer: React.FC<PerspectiveViewerProps> = React.memo(
-    PerspectiveViewerImpl,
-);
+export * from "./viewer";
+export * from "./workspace";

package/src/utils.tsx

@@ -0,0 +1,27 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 React from "react";
+
+export function usePspListener<A>(
+    el: HTMLElement | undefined | null,
+    event: string,
+    cb?: (x: A) => void,
+) {
+    React.useEffect(() => {
+        if (!cb || !el) return;
+        const ctx = new AbortController();
+        const callback = (e: Event) => cb((e as CustomEvent).detail);
+        el?.addEventListener(event, callback, { signal: ctx.signal });
+        return () => ctx.abort();
+    }, [el, cb]);
+}

package/src/viewer.tsx

@@ -0,0 +1,86 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 React from "react";
+import type * as psp from "@perspective-dev/client";
+import type * as pspViewer from "@perspective-dev/viewer";
+import { usePspListener } from "./utils";
+
+function PerspectiveViewerImpl(props: PerspectiveViewerProps) {
+    const [viewer, setViewer] =
+        React.useState<pspViewer.HTMLPerspectiveViewerElement | null>(null);
+
+    React.useEffect(() => {
+        return () => {
+            viewer?.delete();
+        };
+    }, [viewer]);
+
+    React.useEffect(() => {
+        if (props.client) {
+            viewer?.load(props.client);
+        } else {
+            viewer?.eject();
+        }
+    }, [viewer, props.client]);
+
+    React.useEffect(() => {
+        if (props.client && props.config) {
+            viewer?.restore(props.config);
+        }
+    }, [viewer, props.client, JSON.stringify(props.config)]);
+
+    usePspListener(viewer, "perspective-click", props.onClick);
+    usePspListener(viewer, "perspective-select", props.onSelect);
+    usePspListener(viewer, "perspective-config-update", props.onConfigUpdate);
+
+    return (
+        <perspective-viewer
+            ref={setViewer}
+            id={props.id}
+            className={props.className}
+            hidden={props.hidden}
+            slot={props.slot}
+            style={props.style}
+            tabIndex={props.tabIndex}
+            title={props.title}
+        />
+    );
+}
+
+/**
+ * Props for the `<PerspectiveViewer>` component.
+ */
+export interface PerspectiveViewerProps {
+    client?: psp.Client | Promise<psp.Client> | psp.Table | Promise<psp.Table>;
+    config?: pspViewer.ViewerConfigUpdate;
+    onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;
+    onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;
+    onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;
+
+    // Applicable props from `React.HTMLAttributes`, which we cannot extend
+    // directly because Perspective changes the signature of `onClick`.
+    className?: string | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    slot?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+}
+
+/**
+ * A React wrapper component for `<perspective-viewer>` Custom Element.
+ */
+export const PerspectiveViewer: React.FC<PerspectiveViewerProps> = React.memo(
+    PerspectiveViewerImpl,
+);

package/src/workspace.tsx

@@ -0,0 +1,94 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 * as psp from "@perspective-dev/client";
+import type * as psp_viewer from "@perspective-dev/viewer";
+import type * as pspWorkspace from "@perspective-dev/workspace";
+import { PerspectiveWorkspaceConfig } from "@perspective-dev/workspace";
+import * as utils from "./utils";
+import * as React from "react";
+
+export interface NewViewEventDetail {
+    config: psp_viewer.ViewerConfigUpdate;
+    widget: pspWorkspace.PerspectiveViewerWidget;
+}
+
+export interface ToggleGloalFilterEventDetail {
+    widget: pspWorkspace.PerspectiveViewerWidget;
+    isGlobalFilter: boolean;
+}
+
+interface PerspectiveWorkspaceProps extends React.HTMLAttributes<HTMLElement> {
+    client: psp.Client | Promise<psp.Client>;
+    layout: PerspectiveWorkspaceConfig;
+    onLayoutUpdate?: (layout: PerspectiveWorkspaceConfig) => void;
+    onNewView?: (detail: NewViewEventDetail) => void;
+    onToggleGlobalFilter?: (detail: ToggleGloalFilterEventDetail) => void;
+}
+
+const PerspectiveWorkspaceImpl = React.forwardRef<
+    pspWorkspace.HTMLPerspectiveWorkspaceElement | undefined,
+    PerspectiveWorkspaceProps
+>(
+    (
+        {
+            client,
+            layout,
+            onLayoutUpdate,
+            onNewView,
+            onToggleGlobalFilter,
+            ...htmlAttributes
+        },
+        ref,
+    ) => {
+        const [workspace, setWorkspace] =
+            React.useState<pspWorkspace.HTMLPerspectiveWorkspaceElement>();
+
+        React.useImperativeHandle(ref, () => workspace, [workspace]);
+        React.useEffect(() => {
+            if (workspace && layout) {
+                workspace.restore(layout);
+            }
+        }, [workspace, layout]);
+
+        React.useEffect(() => {
+            if (workspace && client) {
+                workspace.load(client);
+            }
+        }, [workspace, client]);
+
+        utils.usePspListener(workspace, "workspace-new-view", onNewView);
+        utils.usePspListener(
+            workspace,
+            "workspace-layout-update",
+            onLayoutUpdate
+                ? ({ layout }: { layout: PerspectiveWorkspaceConfig }) =>
+                      workspace?.save().then((x) => onLayoutUpdate(x))
+                : undefined,
+        );
+
+        utils.usePspListener(
+            workspace,
+            "workspace-toggle-global-filter",
+            onToggleGlobalFilter,
+        );
+
+        return (
+            <perspective-workspace
+                ref={(r) => setWorkspace(r ?? undefined)}
+                {...htmlAttributes}
+            ></perspective-workspace>
+        );
+    },
+);
+
+export const PerspectiveWorkspace = React.memo(PerspectiveWorkspaceImpl);

package/test/js/basic.story.tsx

@@ -14,6 +14,7 @@ import perspective from "@perspective-dev/client";
 import perspective_viewer from "@perspective-dev/viewer";
 import "@perspective-dev/viewer-datagrid";
 import "@perspective-dev/viewer-d3fc";
+import "@perspective-dev/workspace";
 
 // @ts-ignore
 import SERVER_WASM from "@perspective-dev/server/dist/wasm/perspective-server.wasm?url";
@@ -26,12 +27,21 @@ await Promise.all([
     perspective_viewer.init_client(fetch(CLIENT_WASM)),
 ]);
 
-import type * as psp from "@perspective-dev/client";
+import * as psp from "@perspective-dev/client";
 import type * as pspViewer from "@perspective-dev/viewer";
 
 // @ts-ignore
 import SUPERSTORE_ARROW from "superstore-arrow/superstore.lz4.arrow?url";
 
+import * as React from "react";
+import {
+    PerspectiveViewer,
+    PerspectiveWorkspace,
+} from "@perspective-dev/react";
+
+import "@perspective-dev/viewer/dist/css/themes.css";
+import "./index.css";
+
 const WORKER = await perspective.worker();
 
 async function createNewSuperstoreTable(): Promise<psp.Table> {
@@ -45,12 +55,6 @@ const CONFIG: pspViewer.ViewerConfigUpdate = {
     group_by: ["State"],
 };
 
-import * as React from "react";
-import { PerspectiveViewer } from "@perspective-dev/react";
-
-import "@perspective-dev/viewer/dist/css/themes.css";
-import "./index.css";
-
 interface ToolbarState {
     mounted: boolean;
     table?: Promise<psp.Table>;

package/test/js/index.css

@@ -52,3 +52,17 @@ button {
     font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
         "Consolas", "Liberation Mono", monospace;
 }
+
+.workspace-container {
+    display: flex;
+    flex-direction: column;
+
+    .workspace-toolbar {
+        display: flex;
+        flex-direction: row;
+    }
+
+    perspective-workspace {
+        height: 100vh;
+    }
+}

package/test/js/react.spec.tsx

@@ -11,10 +11,9 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { test, expect } from "@playwright/experimental-ct-react";
-import { PerspectiveViewer } from "@perspective-dev/react";
-import React from "react";
 
 import { App } from "./basic.story";
+import { EmptyWorkspace, SingleView } from "./workspace.story";
 
 test.describe("Perspective React", () => {
     test("The viewer loads with data in it", async ({ page, mount }) => {
@@ -26,4 +25,65 @@ test.describe("Perspective React", () => {
 
         expect(count).toBe(2);
     });
+
+    test("React workspace functionality", async ({ page, mount }) => {
+        const comp = await mount(<EmptyWorkspace />);
+        const toggleMount = comp.locator("button.toggle-mount");
+        const addViewer = comp.locator("button.add-viewer");
+        const workspace = comp.locator("perspective-workspace");
+        const viewer = comp.locator("perspective-viewer");
+        await toggleMount.waitFor();
+        await addViewer.click();
+        await addViewer.click();
+        await addViewer.click();
+        await page.waitForFunction(
+            () =>
+                document.querySelector("perspective-workspace")!.children
+                    .length === 3,
+        );
+
+        await expect(viewer).toHaveCount(3);
+        await toggleMount.click();
+        await workspace.waitFor({ state: "detached" });
+        await toggleMount.click();
+        await workspace.waitFor();
+        await page.waitForFunction(
+            () =>
+                document.querySelector("perspective-workspace")!.children
+                    .length === 3,
+        );
+        await expect(viewer).toHaveCount(3);
+    });
+
+    test("Adding a viewer in single-document mode leaves SDM", async ({
+        page,
+        mount,
+    }) => {
+        const name = "abcdef";
+        const comp = await mount(<SingleView name={name} />);
+        const addViewer = comp.locator("button.add-viewer");
+        const viewer = comp.locator("perspective-viewer");
+        const settingsBtn = comp.locator(`perspective-viewer #settings_button`);
+
+        await settingsBtn.waitFor();
+        await addViewer.waitFor();
+        await addViewer.click();
+        await page.waitForFunction(
+            () =>
+                document.querySelector("perspective-workspace")!.children
+                    .length === 2,
+        );
+        expect(await viewer.count()).toBe(2);
+        await settingsBtn.first().click();
+        const settingsPanel = viewer.locator("#settings_panel");
+        await settingsPanel.waitFor();
+        await addViewer.click();
+        await page.waitForFunction(
+            () =>
+                document.querySelector("perspective-workspace")!.children
+                    .length === 3,
+        );
+        expect(await viewer.count()).toBe(3);
+        await settingsPanel.waitFor({ state: "detached" });
+    });
 });

package/test/js/workspace.story.tsx

@@ -0,0 +1,154 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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-dev/workspace";
+
+import {
+    HTMLPerspectiveWorkspaceElement,
+    PerspectiveWorkspaceConfig,
+} from "@perspective-dev/workspace";
+
+import * as React from "react";
+
+import { PerspectiveWorkspace } from "@perspective-dev/react";
+
+import perspective_viewer from "@perspective-dev/viewer";
+import "@perspective-dev/viewer-datagrid";
+import "@perspective-dev/viewer-d3fc";
+import "@perspective-dev/workspace";
+import * as Workspace from "@perspective-dev/workspace";
+
+import * as perspective from "@perspective-dev/client";
+
+import "@perspective-dev/viewer/dist/css/themes.css";
+import "@perspective-dev/workspace/dist/css/pro.css";
+import "./index.css";
+
+// @ts-ignore
+import SERVER_WASM from "@perspective-dev/server/dist/wasm/perspective-server.wasm?url";
+
+// @ts-ignore
+import CLIENT_WASM from "@perspective-dev/viewer/dist/wasm/perspective-viewer.wasm?url";
+
+await Promise.all([
+    perspective.init_server(fetch(SERVER_WASM)),
+    perspective_viewer.init_client(fetch(CLIENT_WASM)),
+]);
+
+const CLIENT = await perspective.worker();
+
+interface WorkspaceState {
+    layout: PerspectiveWorkspaceConfig;
+    mounted: boolean;
+}
+
+interface WorkspaceAppProps {
+    layout: PerspectiveWorkspaceConfig;
+    onSpecial?: () => void;
+}
+
+const WorkspaceApp: React.FC<WorkspaceAppProps> = (props) => {
+    const [state, setState] = React.useState<WorkspaceState>({
+        layout: props.layout,
+        mounted: true,
+    });
+
+    const onClickAddViewer = () => {
+        const name = window.crypto.randomUUID();
+        const data = `a,b,c\n${Math.random()},${Math.random()},${Math.random()}`;
+        CLIENT.table(data, { name });
+        const nextId = Workspace.genId(state.layout);
+        const layout = Workspace.addViewer(
+            state.layout,
+            {
+                table: name,
+                title: name,
+            },
+            nextId,
+        );
+
+        setState({
+            ...state,
+            layout,
+        });
+    };
+
+    const onClickToggleMount = () =>
+        setState((old) => ({ ...old, mounted: !state.mounted }));
+
+    const onLayoutUpdate = (layout: PerspectiveWorkspaceConfig) => {
+        setState({ ...state, layout });
+    };
+
+    React.useEffect(() => {
+        setState((s) => ({
+            ...s,
+            layout: props.layout,
+        }));
+    }, [props.layout]);
+
+    return (
+        <div className="workspace-container">
+            <div className="workspace-toolbar">
+                <button className="toggle-mount" onClick={onClickToggleMount}>
+                    Toggle Mount
+                </button>
+                <button className="add-viewer" onClick={onClickAddViewer}>
+                    Add Viewer
+                </button>
+                {props.onSpecial && (
+                    <button className="special" onClick={props.onSpecial}>
+                        Special Third Button
+                    </button>
+                )}
+            </div>
+            {state.mounted && (
+                <PerspectiveWorkspace
+                    client={CLIENT}
+                    layout={state.layout}
+                    onLayoutUpdate={onLayoutUpdate}
+                />
+            )}
+        </div>
+    );
+};
+
+/// Renders the app with a default empty workspace
+export const EmptyWorkspace: React.FC = () => {
+    return (
+        <WorkspaceApp
+            layout={{ sizes: [1], viewers: {}, detail: { main: null } }}
+        />
+    );
+};
+
+export const SingleView: React.FC<{ name: string }> = ({ name }) => {
+    const _table = CLIENT.table("a,b,c\n1,2,3", { name });
+    const layout: PerspectiveWorkspaceConfig = {
+        sizes: [1],
+        detail: {
+            main: {
+                type: "tab-area",
+                currentIndex: 0,
+                widgets: [name],
+            },
+        },
+        viewers: {
+            [name]: {
+                table: name,
+                columns: ["a", "b", "c"],
+                title: name,
+            },
+        },
+    };
+
+    return <WorkspaceApp layout={layout} />;
+};