Use folder instead of panels for lights

src/core/geometry/iGeometryCommons.ts

@@ -172,7 +172,7 @@ export const iGeometryCommons = {
                     hidden: () => !this.hasAttribute('color'),
                     value: async() => {
                         if (!this.hasAttribute('color')) {
-                            await ThreeViewer.Dialog.prompt('No color attribute found')
+                            await ThreeViewer.Dialog.alert('No color attribute found')
                             return
                         }
                         if (!await ThreeViewer.Dialog.confirm('Remove color attribute?')) return

src/core/light/AmbientLight2.ts

@@ -2,10 +2,10 @@ import {AmbientLight, Color, ColorRepresentation} from 'three'
 import {ILight} from './ILight'
 import {iLightCommons} from '../object/iLightCommons'
 import {IObject3D} from '../IObject'
-import {uiColor, UiObjectConfig, uiPanelContainer, uiSlider, uiToggle} from 'uiconfig.js'
+import {uiColor, uiFolderContainer, UiObjectConfig, uiSlider, uiToggle} from 'uiconfig.js'
 import {onChange3} from 'ts-browser-helpers'
 
-@uiPanelContainer('Ambient Light')
+@uiFolderContainer('Ambient Light')
 export class AmbientLight2 extends AmbientLight implements ILight<undefined> {
     assetType = 'light' as const
     setDirty = iLightCommons.setDirty

src/core/light/DirectionalLight2.ts

@@ -2,7 +2,7 @@ import {Color, ColorRepresentation, DirectionalLight, DirectionalLightShadow, Eu
 import {ILight} from './ILight'
 import {iLightCommons} from '../object/iLightCommons'
 import {IObject3D} from '../IObject'
-import {uiColor, uiNumber, UiObjectConfig, uiPanelContainer, uiSlider, uiToggle, uiVector} from 'uiconfig.js'
+import {uiColor, uiFolderContainer, uiNumber, UiObjectConfig, uiSlider, uiToggle, uiVector} from 'uiconfig.js'
 import {onChange2, onChange3} from 'ts-browser-helpers'
 import {bindToValue} from '../../three'
 
@@ -15,7 +15,7 @@ import {bindToValue} from '../../three'
  * @category Lights
  */
 // todo: add Light section in the readme detailing these ...2 lights
-@uiPanelContainer('Directional Light')
+@uiFolderContainer('Directional Light')
 export class DirectionalLight2 extends DirectionalLight implements ILight<DirectionalLightShadow> {
     assetType = 'light' as const
     setDirty = iLightCommons.setDirty

src/core/light/HemisphereLight2.ts

@@ -2,10 +2,10 @@ import {Color, ColorRepresentation, HemisphereLight, Vector3} from 'three'
 import {ILight} from './ILight'
 import {iLightCommons} from '../object/iLightCommons'
 import {IObject3D} from '../IObject'
-import {uiColor, UiObjectConfig, uiPanelContainer, uiSlider, uiToggle, uiVector} from 'uiconfig.js'
+import {uiColor, uiFolderContainer, UiObjectConfig, uiSlider, uiToggle, uiVector} from 'uiconfig.js'
 import {onChange3} from 'ts-browser-helpers'
 
-@uiPanelContainer('Hemisphere Light')
+@uiFolderContainer('Hemisphere Light')
 export class HemisphereLight2 extends HemisphereLight implements ILight<undefined> {
     assetType = 'light' as const
     setDirty = iLightCommons.setDirty

src/core/light/PointLight2.ts

@@ -2,7 +2,7 @@ import {Color, ColorRepresentation, PointLight, PointLightShadow, Vector2, Vecto
 import {ILight} from './ILight'
 import {iLightCommons} from '../object/iLightCommons'
 import {IObject3D} from '../IObject'
-import {uiColor, uiNumber, UiObjectConfig, uiPanelContainer, uiSlider, uiToggle, uiVector} from 'uiconfig.js'
+import {uiColor, uiFolderContainer, uiNumber, UiObjectConfig, uiSlider, uiToggle, uiVector} from 'uiconfig.js'
 import {onChange3} from 'ts-browser-helpers'
 import {bindToValue} from '../../three'
 
@@ -11,7 +11,7 @@ import {bindToValue} from '../../three'
  *
  * Note - gltf serialization is handled by {@link GLTFLightExtrasExtension}
  */
-@uiPanelContainer('Point Light')
+@uiFolderContainer('Point Light')
 export class PointLight2 extends PointLight implements ILight<PointLightShadow> {
     assetType = 'light' as const
     setDirty = iLightCommons.setDirty

src/core/light/RectAreaLight2.ts

@@ -2,10 +2,10 @@ import {Color, ColorRepresentation, RectAreaLight} from 'three'
 import {ILight} from './ILight'
 import {iLightCommons} from '../object/iLightCommons'
 import {IObject3D} from '../IObject'
-import {uiColor, uiNumber, UiObjectConfig, uiPanelContainer, uiSlider, uiToggle} from 'uiconfig.js'
+import {uiColor, uiFolderContainer, uiNumber, UiObjectConfig, uiSlider, uiToggle} from 'uiconfig.js'
 import {onChange3} from 'ts-browser-helpers'
 
-@uiPanelContainer('RectArea Light')
+@uiFolderContainer('RectArea Light')
 export class RectAreaLight2 extends RectAreaLight implements ILight<undefined> {
     assetType = 'light' as const
     setDirty = iLightCommons.setDirty

src/core/light/SpotLight2.ts

@@ -2,7 +2,7 @@ import {Color, ColorRepresentation, Euler, SpotLight, SpotLightShadow, Vector2,
 import {ILight} from './ILight'
 import {iLightCommons} from '../object/iLightCommons'
 import {IObject3D} from '../IObject'
-import {uiColor, uiInput, uiNumber, UiObjectConfig, uiPanelContainer, uiSlider, uiToggle, uiVector} from 'uiconfig.js'
+import {uiColor, uiFolderContainer, uiInput, uiNumber, UiObjectConfig, uiSlider, uiToggle, uiVector} from 'uiconfig.js'
 import {onChange3} from 'ts-browser-helpers'
 import {bindToValue} from '../../three'
 
@@ -11,7 +11,7 @@ import {bindToValue} from '../../three'
  *
  * Note - gltf serialization is handled by {@link GLTFLightExtrasExtension}
  */
-@uiPanelContainer('Spot Light')
+@uiFolderContainer('Spot Light')
 export class SpotLight2 extends SpotLight implements ILight<SpotLightShadow> {
     assetType = 'light' as const
     setDirty = iLightCommons.setDirty