Theatric: make the studio select the default object on first load

packages/theatric/src/index.ts

@@ -217,12 +217,14 @@ export function useControls<Config extends ControlsAndButtons>(
     allPanelActions.push(actions)
     // cleanup runs after render, so we have to reconfigure with the new props here too, doing it during render just makes sure that
     // the very first values returned are not undefined
-    sheet.object(panel, Object.assign({}, ...allPanelProps), {
+    let obj = sheet.object(panel, Object.assign({}, ...allPanelProps), {
       reconfigure: true,
       __actions__THIS_API_IS_UNSTABLE_AND_WILL_CHANGE_IN_THE_NEXT_VERSION:
         Object.assign({}, ...allPanelActions),
     })
 
+    selectObjectIfNecessary(obj)
+
     return () => {
       allPanelProps.splice(allPanelProps.indexOf(props), 1)
       allActions[panel].splice(allPanelActions.indexOf(actions), 1)
@@ -328,3 +330,17 @@ function callGetProject() {
   _project = getProject('Theatric', _projectConfig ?? undefined)
   return _project
 }
+
+let objAlreadySelected = false
+// When the user first opens the page, no object will be selected, which for users
+// unfamiliar with theatre can be confusing. Let's help the user by selecting the first object
+// that is created using `useControls()`.
+function selectObjectIfNecessary(obj: ISheetObject) {
+  if (objAlreadySelected) return
+  objAlreadySelected = true
+  if (process.env.NODE_ENV === 'development') {
+    if (studio.selection.length === 0) {
+      studio.setSelection([obj])
+    }
+  }
+}