uiconfig-blueprint 0.0.2 → 0.1.0-dev.1

package/lib/esnext/lib.js

@@ -0,0 +1,33 @@
+export * from './threejs';
+export * from './contexts';
+export * from './ConfigObject';
+export * from './components/bpIconWrapper';
+export * from './components/ConfigurationPanelComponent';
+export * from './components/DraggableIcon';
+export * from './components/ExtendedNumericInput';
+export * from './components/FileComponent';
+export * from './components/FormGroupComponent';
+export * from './components/InspectorStackComponent';
+export * from './components/variableIcons';
+export * from './components/VisualStyleContext';
+export * from './components/DialogContext';
+export * from './components/loadingState';
+export * from './bpComponents/BPButtonComponent';
+export * from './bpComponents/BPColorInputComponent';
+export * from './bpComponents/BPComponent';
+export * from './bpComponents/BPContainerComponent';
+export * from './bpComponents/BPDropdownInputComponent';
+export * from './bpComponents/BPFileComponent';
+export * from './bpComponents/BPFolderComponent';
+export * from './bpComponents/BPInputComponent';
+export * from './bpComponents/BPLabelledComponent';
+export * from './bpComponents/BPNumberInputComponent';
+export * from './bpComponents/BPPanelComponent';
+export * from './bpComponents/BPSliderInputComponent';
+export * from './bpComponents/BPTextInputComponent';
+export * from './bpComponents/BPToggleInputComponent';
+export * from './bpComponents/BPTreeComponent';
+export * from './bpComponents/BPTreeFolderComponent';
+export * from './bpComponents/BPValueComponent';
+export * from './bpComponents/BPVectorInputComponent';
+//# sourceMappingURL=lib.js.map

package/lib/esnext/lib.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.js","sourceRoot":"","sources":["../../src/lib.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,0CAA0C,CAAA;AACxD,cAAc,4BAA4B,CAAA;AAC1C,cAAc,mCAAmC,CAAA;AACjD,cAAc,4BAA4B,CAAA;AAC1C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sCAAsC,CAAA;AACpD,cAAc,4BAA4B,CAAA;AAC1C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,kCAAkC,CAAA;AAChD,cAAc,sCAAsC,CAAA;AACpD,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qCAAqC,CAAA;AACnD,cAAc,yCAAyC,CAAA;AACvD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,oCAAoC,CAAA;AAClD,cAAc,uCAAuC,CAAA;AACrD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uCAAuC,CAAA;AACrD,cAAc,qCAAqC,CAAA;AACnD,cAAc,uCAAuC,CAAA;AACrD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sCAAsC,CAAA;AACpD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uCAAuC,CAAA"}

package/lib/esnext/threejs.d.ts

@@ -0,0 +1,2 @@
+import type * as THREE_1 from 'three';
+export type THREE = Pick<typeof THREE_1, 'Color' | 'Vector2' | 'Vector3' | 'Vector4'>;

package/lib/esnext/threejs.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=threejs.js.map

package/lib/esnext/threejs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"threejs.js","sourceRoot":"","sources":["../../src/threejs.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,20 +1,14 @@
 {
   "name": "uiconfig-blueprint",
   "name:umd": "bpui",
-  "version": "0.0.2",
+  "version": "0.1.0-dev.1",
   "description": "Blueprint.js wrapper and custom components for web controls UI. To be used with uiconfig.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
-  },
-  "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "sideEffects": false,
   "files": [
+    "lib",
     "dist",
     "src",
     "docs",
@@ -41,9 +35,14 @@
   },
   "homepage": "https://github.com/repalash/uiconfig-blueprint#readme",
   "dependencies": {
+    "@blueprintjs/core": "^5.7.2",
     "@types/three": "^0.152.1",
+    "ts-browser-helpers": "^0.8.0",
     "@types/webxr": "^0.5.10",
-    "uiconfig.js": "^0.0.8",
+    "uiconfig.js": "^0.0.9",
+    "@blueprintjs/icons": "^5.5.0",
+    "@blueprintjs/select": "^5.0.20",
+    "blueprint-styler": "^5.0.2",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "react": "^18.2.0",
@@ -51,15 +50,20 @@
   },
   "//": {
     "dependencies": {
-      "uiconfig.js": "^0.0.8"
+      "uiconfig.js": "^0.0.9"
     },
     "local_dependencies": {
       "uiconfig.js": "file:./../uiconfig/"
+    },
+    "scripts": {
+      "compile:cjs": "tsc -p ./src -m commonjs --verbatimModuleSyntax false --outDir lib/cjs",
+      "compile:esnext": "tsc -p ./src -t esnext --outDir lib/esnext"
     }
   },
   "browserslist": [
     "defaults"
   ],
   "type": "module",
-  "browser": "dist/index.js"
+  "browser": "dist/index.js",
+  "types": "dist/index.d.ts"
 }

package/src/ConfigObject.tsx

@@ -30,7 +30,7 @@ export interface ConfigProps extends PanelActions {
     level?: number,
 }
 
-const generators: PartialRecord<UiConfigTypes, Class<React.Component<BPComponentProps<any>, BPComponentState>>> = {
+export const ConfigObjectGenerators: PartialRecord<UiConfigTypes, Class<React.Component<BPComponentProps<any>, BPComponentState>>> = {
     input: BPTextInputComponent,
     number: BPNumberInputComponent,
     button: BPButtonComponent,
@@ -54,7 +54,7 @@ const generators: PartialRecord<UiConfigTypes, Class<React.Component<BPComponent
 
 export class ConfigObject extends React.Component<ConfigProps, {}> {
     static contextType = UiConfigRendererContext
-    context!: React.ContextType<typeof UiConfigRendererContext>
+    declare context: React.ContextType<typeof UiConfigRendererContext>
     state = {}
 
     render() {
@@ -72,7 +72,7 @@ export class ConfigObject extends React.Component<ConfigProps, {}> {
         }
         if (val && type === 'input' && typeof (val as any).x === 'number') this.props.config.type = type = 'vec'
 
-        let BPComp = generators[type]
+        let BPComp = ConfigObjectGenerators[type]
         if (type === 'panel' && !this.props.isPanel) {
             const label = this.context.methods.getLabel(this.props.config)
             return (
@@ -107,7 +107,7 @@ export class ConfigObject extends React.Component<ConfigProps, {}> {
         // }
         // if (!this.props.uiConfig.type) return (<li key={v4()}></li>)
         // if (!this.props.uiConfig.uuid) this.props.uiConfig.uuid = v4()
-        // const g = generators[this.props.uiConfig.type as any as UiConfigTypes]
+        // const g = ConfigObjectGenerators[this.props.uiConfig.type as any as UiConfigTypes]
         // // console.log(props.uiConfig)
         // if (!g) return <li key={this.props.uiConfig.uuid}></li>
         // this.props.uiConfig.uiRefresh = (mode, deep, delay) => {

package/src/UiConfigRendererBlueprint.tsx

@@ -2,7 +2,7 @@ import {createDiv, createStyles, css} from "ts-browser-helpers";
 import {UiConfigRendererBase, UiObjectConfig} from "uiconfig.js";
 import React from 'react'
 import {createRoot, Root} from 'react-dom/client'
-import {InspectorStackComponent} from './components/InspectorStackComponent'
+import {ConfigurationPanelComponent} from './components/ConfigurationPanelComponent'
 import {BPComponent, UiConfigRendererContext} from './bpComponents/BPComponent'
 // @ts-ignore
 import rendererCss from './renderer.scss?inline' // for rollup build remove ?inline
@@ -47,7 +47,7 @@ export class UiConfigRendererBlueprint extends UiConfigRendererBase<Root> {
         this._root.render(
             <React.StrictMode>
             <UiConfigRendererContext.Provider value={this}>
-                <InspectorStackComponent config={this.config}/>
+                <ConfigurationPanelComponent config={this.config}/>
             </UiConfigRendererContext.Provider>
             </React.StrictMode>
         )
@@ -69,17 +69,4 @@ export class UiConfigRendererBlueprint extends UiConfigRendererBase<Root> {
         // todo
     }
 
-    // todo: hidden and disabled
-
-    // protected _renderUiConfig(uiConfig: UiObjectConfig<any, string>, parent: any): any {
-    //     const ui = uiConfig.type ? this._typeGenerators[uiConfig.type]?.(parent, uiConfig, this) as BladeApi<BladeController<View>> | undefined : undefined
-    //     if (ui) {
-    //         ui.hidden = getOrCall(uiConfig.hidden) ?? false
-    //         ui.disabled = getOrCall(uiConfig.disabled) ?? false // todo: also see if property is writable?
-    //     }
-    //
-    //     return ui
-    //
-    // }
-
 }

package/src/bpComponents/BPButtonComponent.scss

@@ -2,6 +2,7 @@
 .bpButtonComponent {
   //width: 100%;
   display: flex;
+  justify-content: center;
   flex-basis: 50%;
   margin: 2px 0;
   width: max-content;

package/src/bpComponents/BPColorInputComponent.tsx

@@ -1,4 +1,4 @@
-import React, {createRef} from "react";
+import {createRef} from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {Button, Icon, InputGroup, Popover} from "@blueprintjs/core";
 import {BPValueComponent, BPValueComponentState} from "./BPValueComponent";

package/src/bpComponents/BPComponent.tsx

@@ -1,7 +1,8 @@
 import React, {createContext} from "react";
-import type {UiConfigRendererBlueprint} from '../UiConfigRendererBlueprint'
+import type {UiConfigRendererBase} from 'uiconfig.js'
 import {UiObjectConfig} from 'uiconfig.js'
 import {getOrCall} from 'ts-browser-helpers'
+import {THREE} from "../threejs";
 
 export type BPComponentProps<T> = {
     config: UiObjectConfig<T>,
@@ -12,11 +13,16 @@ export type BPComponentState = {
     disabled?: boolean
     readOnly?: boolean // same as disabled(for most inputs)
 }
-export const UiConfigRendererContext = createContext<UiConfigRendererBlueprint>(null as any)
+export interface UiConfigRendererBaseBp extends UiConfigRendererBase{
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    THREE: THREE|undefined
+}
+
+export const UiConfigRendererContext = createContext<UiConfigRendererBaseBp>(null as any)
 export type UiConfigRendererContextType = React.ContextType<typeof UiConfigRendererContext>
 export abstract class BPComponent<TValue, TState, TProps extends BPComponentProps<TValue> = BPComponentProps<TValue>> extends React.Component<TProps, TState> {
     static contextType = UiConfigRendererContext
-    context!: UiConfigRendererContextType
+    declare context: UiConfigRendererContextType
 
     protected constructor(props: TProps, context: UiConfigRendererContextType, state: TState) {
         super(props, context);

package/src/bpComponents/BPDropdownInputComponent.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {Button, MenuItem} from "@blueprintjs/core";
 import {BPInputComponent} from "./BPInputComponent";

package/src/bpComponents/BPFileComponent.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {FileComponent} from "../components/FileComponent";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {BPValueComponent, BPValueComponentState} from "./BPValueComponent";
@@ -14,8 +13,8 @@ type BPFileComponentExtras = {fileLoader?: {load: (v: string|File|{path: string,
 type BPFileComponentContextType = UiConfigRendererContextType & BPFileComponentExtras
 
 export class BPFileComponent extends BPValueComponent<FileImportType | null, BPFileComponentState, StateValue> {
-    context!: BPFileComponentContextType
-    props!: BPComponentProps<FileImportType | null> & BPFileComponentExtras
+    declare context: BPFileComponentContextType
+    declare props: BPComponentProps<FileImportType | null> & BPFileComponentExtras
     constructor(props: BPComponentProps<FileImportType | null> & BPFileComponentExtras, context: BPFileComponentContextType) {
         super(props, context, {
             mode: 'file',

package/src/bpComponents/BPFolderComponent.scss

@@ -1,4 +1,4 @@
-@import "~@blueprintjs/core/lib/scss/variables.scss";
+@import "@blueprintjs/core/lib/scss/variables.scss";
 
 // todo: style for bp5-disabled
 
@@ -93,7 +93,7 @@
   justify-content: space-between;
   flex-direction: row;
   box-shadow: 0 1px $pt-divider-black;
-  z-index: 1;
+  //z-index: 1;
 
   > button {
     border-radius: 0;

package/src/bpComponents/BPInputComponent.tsx

@@ -1,6 +1,6 @@
 import {BPValueComponent, BPValueComponentState} from "./BPValueComponent";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
-import React, {ReactNode} from "react";
+import {ReactNode} from "react";
 import {FormGroupComponent} from "../components/FormGroupComponent";
 
 export abstract class BPInputComponent<

package/src/bpComponents/BPPanelComponent.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {ConfigObject} from "../ConfigObject";
 import {BPLabelledComponentState} from "./BPLabelledComponent";

package/src/bpComponents/BPSliderInputComponent.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {NumericInput, Slider} from "@blueprintjs/core";
 import {BPInputComponent} from "./BPInputComponent";

package/src/bpComponents/BPTextInputComponent.tsx

@@ -1,4 +1,4 @@
-import React, {ChangeEventHandler} from "react";
+import {ChangeEventHandler} from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {InputGroup} from "@blueprintjs/core";
 import {BPInputComponent} from "./BPInputComponent";

package/src/bpComponents/BPToggleInputComponent.tsx

@@ -1,4 +1,4 @@
-import React, {ChangeEventHandler} from "react";
+import {ChangeEventHandler} from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {Switch} from "@blueprintjs/core";
 import {BPInputComponent} from "./BPInputComponent";

package/src/bpComponents/BPTreeComponent.tsx

@@ -1,25 +1,19 @@
 import {BPComponent, BPComponentProps, BPComponentState, UiConfigRendererContextType} from "./BPComponent";
 import {Tree, TreeNodeInfo} from "@blueprintjs/core";
-import React from "react";
 
 export type BPTreeComponentState<T = {}> = BPComponentState & {
     nodes: TreeNodeInfo<T>[]
 }
 
-export function forEachTreeNode<T>(nodes: TreeNodeInfo<T>[] | undefined, callback: (node: TreeNodeInfo<T>) => void) {
-    if (!nodes) return;
-    for (const node of nodes) {
-        callback(node);
-        forEachTreeNode(node.childNodes, callback);
-    }
-}
+// https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/core-examples/treeExample.tsx
+type NodePath = number[];
 
 export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>> {
     constructor(props: BPComponentProps<TConfigVal>, context: UiConfigRendererContextType) {
         super(props, context, {nodes: []});
     }
 
-    protected _infoMap = new Map<string, TreeNodeInfo<T>>()
+    protected _infoMap = new Map<string | number, TreeNodeInfo<T>>()
 
     protected _createNodeInfo(id: string, obj: T) {
         return {
@@ -27,6 +21,8 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
             label: 'unnamed',
             nodeData: obj,
             childNodes: [],
+            isExpanded: false,
+            isSelected: false,
         }
     }
 
@@ -36,23 +32,48 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
 
     protected abstract _getRootNodes(): T[]
 
-    protected async _onNodeClick(_node: TreeNodeInfo<T>) {
+    protected async _onNodeClick(_id: string | number, _path: number[]) {
     }
 
-    protected async _onNodeDoubleClick(_node: TreeNodeInfo<T>) {
+    protected async _onNodeDoubleClick(_id: string | number, _path: number[]) {
     }
 
-    protected async _onNodeExpand(node: TreeNodeInfo<T>) {
-        node.isExpanded = !node.isExpanded
-        await this.setStatePromise(this.state)
+    protected _cloneNodes(callback?: (t:TreeNodeInfo<T>)=>void, state?: TreeNodeInfo<T>[]): TreeNodeInfo<T>[] {
+        return (state ?? this.state.nodes).map(n => {
+            let res: TreeNodeInfo<T> = {
+                ...n,
+                childNodes: n.childNodes ? this._cloneNodes(callback, n.childNodes) : undefined
+            }
+            if(callback) callback(res)
+            this._infoMap.set(n.id, res)
+            return res
+        })
+    }
+
+    protected _forEachNode<T>(nodes: TreeNodeInfo<T>[] | undefined, callback: (node: TreeNodeInfo<T>) => void) {
+        if (nodes === undefined) {
+            return nodes;
+        }
+        for (const node of nodes) {
+            callback(node);
+            this._forEachNode(node.childNodes, callback);
+        }
+        return nodes
+    }
+    protected _forNodeAtPath<T>(nodes: TreeNodeInfo<T>[], path: NodePath, callback: (node: TreeNodeInfo<T>) => void) {
+        callback(Tree.nodeFromPath(path, nodes));
     }
 
-    protected async _onNodeCollapse(node: TreeNodeInfo<T>) {
+    protected async _onNodeExpandCollapse(_id: string | number, _path: number[]) {
+        const nodes = this._cloneNodes()
+        const node = this._infoMap.get(_id)
+        if (!node) return
         node.isExpanded = !node.isExpanded
-        await this.setStatePromise(this.state)
+        // forNodeAtPath(nodes, _path, node => (node.isExpanded = !node.isExpanded));
+        await this.setStatePromise({...this.state, nodes})
     }
 
-    protected async _onNodeContextMenu(_node: TreeNodeInfo<T>) {
+    protected async _onNodeContextMenu(_id: string | number, _path: number[]) {
     }
 
     protected buildData(data: TreeNodeInfo<T>[], obj: T, _?: any, _2?: any) {
@@ -72,22 +93,19 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         const nodes = children.map(c => {
             return this.buildData([], c)[0]
         }).filter(v => v)
-        console.log('update', nodes, children)
         return super.getUpdatedState({
             nodes
         })
     }
 
     deselectAll() {
-        forEachTreeNode(this.state.nodes, (n) => n.isSelected = false)
+        const nodes = this._cloneNodes(n => n.isSelected = false)
+        return this.setStatePromise({...this.state, nodes})
     }
 
-    async setSelected(node?: TreeNodeInfo<T>) {
-        this.deselectAll()
-        if (node) {
-            node.isSelected = true
-            await this.setStatePromise(this.state)
-        }
+    async setSelected(id?: string) {
+        const nodes = this._cloneNodes(n => n.isSelected = n.id === id)
+        return this.setStatePromise({...this.state, nodes})
     }
 
     componentDidMount() {
@@ -99,26 +117,25 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
     }
 
     render() {
-        console.log('render tree', this.state.nodes)
         const TreeT = Tree.ofType<T>()
         return !this.state.hidden ? (
             <TreeT
                 contents={this.state.nodes}
                 className="folderContent"
                 onNodeExpand={(node, _path, _e) => {
-                    this._onNodeExpand(node)
+                    this._onNodeExpandCollapse(node.id, _path)
                 }}
                 onNodeCollapse={(node, _path, _e) => {
-                    this._onNodeCollapse(node)
+                    this._onNodeExpandCollapse(node.id, _path)
                 }}
                 onNodeClick={(node, _path, _e) => {
-                    this._onNodeClick(node)
+                    this._onNodeClick(node.id, _path)
                 }}
                 onNodeDoubleClick={(node, _path, _e) => {
-                    this._onNodeDoubleClick(node)
+                    this._onNodeDoubleClick(node.id, _path)
                 }}
                 onNodeContextMenu={(node, _path, _e) => {
-                    this._onNodeContextMenu(node)
+                    this._onNodeContextMenu(node.id, _path)
                 }}
             />
         ) : null

package/src/bpComponents/BPTreeFolderComponent.tsx

@@ -20,11 +20,11 @@ export class BPTreeFolderComponent extends BPTreeComponent<UiObjectConfig> {
         return (this.props.config.children || []).map(c => getOrCall(c) || {}).flat(2) as UiObjectConfig[]
     }
 
-    protected async _onNodeClick(_node: TreeNodeInfo<UiObjectConfig>) {
+    protected async _onNodeClick(_id: string|number) {
         console.log("TODO: Tree node clicked")
     }
 
-    protected async _onNodeDoubleClick(_node: TreeNodeInfo<UiObjectConfig>) {
+    protected async _onNodeDoubleClick(_id: string|number) {
         console.log("TODO: Tree node double clicked")
     }
 

package/src/components/AppToaster.tsx

@@ -0,0 +1,18 @@
+import {OverlayToaster, Toaster} from "@blueprintjs/core";
+
+// /** Singleton toaster instance. Create separate instances for different options. */
+// export const AppToaster = OverlayToaster.create({
+//     // className: "recipe-toaster",
+//     position: Position.TOP,
+// });
+
+// hack for blueprint 5, remove in blueprint 6
+export const AppToasterRef = {ref: null as Toaster | null}
+export const AppToaster = ()=>AppToasterRef.ref ?? {show: ()=>{}, dismiss: ()=>{}} as any as Toaster
+
+/**
+ * Use this component in the App.tsx or other root component to create the AppToaster singleton
+ */
+export function AppToasterOverlay(){
+    return <OverlayToaster ref={(ref: Toaster|null) => (AppToasterRef.ref = ref)} />
+}

package/src/components/ConfigurationPanelComponent.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import {Button, Card, Panel, PanelStack2, Popover} from "@blueprintjs/core";
+import {ConfigObject, ConfigProps} from "../ConfigObject";
+import {UiObjectConfig} from 'uiconfig.js'
+import {UiConfigRendererContext} from '../bpComponents/BPComponent'
+import {Classes} from '@blueprintjs/core/src/common'
+import {
+    defaultVisualStyle,
+    setupVisualStyle,
+    ThemeSettingsMenuComponent,
+    VisualStyleContext
+} from './VisualStyleContext'
+
+// import {ViewerAppContext} from "./ViewerAppComponent";
+
+export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<any, 'panel'> }) {
+    const renderer = React.useContext(UiConfigRendererContext)
+    const stackItem = React.useCallback(() => {
+        return {
+            props: {config: config},
+            renderPanel(props: ConfigProps) {
+                // console.log(props.config === config)
+                return (
+                    <ul style={{listStyleType: "none", paddingLeft: "0", margin: "0"}}>
+                        {/*{v && (<ConfigObject {...props}/>)}*/}
+                        {config && (<ConfigObject {...props} isPanel={true}/>)}
+                    </ul>
+                )
+            },
+            title: renderer.methods.getLabel(config)
+        } as Panel<{ config: UiObjectConfig }>
+    }, [config])
+    const [currentPanelStack, setCurrentPanelStack] = React.useState<Array<Panel<{ config: UiObjectConfig }>>>([stackItem()]);
+
+    React.useEffect(() => {
+        setCurrentPanelStack([stackItem()])
+    }, [stackItem, setCurrentPanelStack])
+
+    const style = setupVisualStyle()
+
+    return (
+        <VisualStyleContext.Provider value={{...defaultVisualStyle, ...style}}>
+        <Card id="bpInspectorCard" className={style.darkMode?Classes.DARK:""} style={{height: "100%", flexGrow: "1", position: "relative"}}>
+            <PanelStack2 className="inspectorPanelStack"
+                         showPanelHeader={true}
+                         renderActivePanelOnly={true}
+                         onOpen={(p) => setCurrentPanelStack([...currentPanelStack, p] as any)}
+                         onClose={() => setCurrentPanelStack(currentPanelStack.slice(0, -1))}
+                         stack={currentPanelStack}/>
+            <div className={"bpPanelStackHeaderOverlay " + Classes.PANEL_STACK2_HEADER}>
+                <Popover targetProps={{style: {position: "absolute", right: "5px"}}}
+                         minimal={true}
+                         targetTagName={"div"}
+                    content={
+                    <ThemeSettingsMenuComponent/>
+                } placement="bottom">
+                    <Button icon="cog" small minimal text="" />
+                </Popover>
+            </div>
+        </Card>
+        </VisualStyleContext.Provider>
+    )
+}