better display and also temporary fallback for lowerLevelBackground

src/components/button.style.js

@@ -22,6 +22,10 @@ export default {
     // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
     // This (currently) is further multipled by number of places where component can exist.
   },
+  editor: {
+    aspect: '6:1',
+    border: 0
+  },
   // This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
   validInnerComponents: [
     'Text',

src/components/button_unstyled.style.js

@@ -1,6 +1,7 @@
 export default {
   name: 'ButtonUnstyled',
   selector: '.button-unstyled',
+  notEditable: true,
   states: {
     toggled: '.toggled',
     disabled: ':disabled',

src/components/modal/modals.style.js

@@ -2,6 +2,7 @@ export default {
   name: 'Modals',
   selector: '.modal-view',
   lazy: true,
+  notEditable: true,
   validInnerComponents: [
     'Panel'
   ],

src/components/scrollbar.style.js

@@ -1,6 +1,7 @@
 export default {
   name: 'Scrollbar',
   selector: '::-webkit-scrollbar',
+  notEditable: true, // for now
   defaultRules: [
     {
       directives: {

src/components/scrollbar_element.style.js

@@ -31,6 +31,7 @@ const hoverGlow = {
 export default {
   name: 'ScrollbarElement',
   selector: '::-webkit-scrollbar-button',
+  notEditable: true, // for now
   states: {
     pressed: ':active',
     hover: ':hover:not(:disabled)',

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -67,7 +67,7 @@ export default {
       componentKeysRaw
         .map(
           key => [key, componentsContext(key).default]
-        ).filter(([key, component]) => !component.virtual)
+        ).filter(([key, component]) => !component.virtual && !component.notEditable)
     )
     const componentKeys = [...componentsMap.keys()]
 
@@ -108,20 +108,37 @@ export default {
     const previewRules = reactive([])
     const previewClass = computed(() => {
       const selectors = []
-      selectors.push(selectedComponentValue.value.variants[selectedVariant.value])
+      if (!!selectedComponentValue.value.variants?.normal || selectedVariant.value !== 'normal') {
+        selectors.push(selectedComponentValue.value.variants[selectedVariant.value])
+      }
       if (selectedStates.size > 0) {
         selectedStates.forEach(state => {
           const original = selectedComponentValue.value.states[state]
           selectors.push(simulatePseudoSelectors(original))
         })
       }
-      console.log(selectors)
       return selectors.map(x => x.substring(1)).join('')
     })
 
+    const editorHintStyle = computed(() => {
+      const editorHint = selectedComponentValue.value.editor
+      const styles = []
+      if (editorHint && Object.keys(editorHint).length > 0) {
+        console.log('EH', editorHint)
+        if (editorHint.aspect != null) {
+          styles.push(`aspect-ratio: ${editorHint.aspect} !important;`)
+        }
+        if (editorHint.border != null) {
+          styles.push(`border-width: ${editorHint.border}px !important;`)
+        }
+      }
+      console.log('EH', styles)
+      return styles.join('; ')
+    })
+
     const previewCss = computed(() => {
-      console.log(previewRules)
-      const scoped = getCssRules(previewRules).map(simulatePseudoSelectors)
+      const scoped = getCssRules(previewRules)
+        .map(simulatePseudoSelectors)
       return scoped.join('\n')
     })
 
@@ -170,6 +187,7 @@ export default {
       getFriendlyNamePath,
       getStatePath,
       getVariantPath,
+      editorHintStyle,
       previewCss,
       previewClass,
       fallbackI18n (translated, fallback) {

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -132,6 +132,7 @@
         <ComponentPreview
           class="component-preview"
           :previewClass="previewClass"
+          :previewStyle="editorHintStyle"
           @update:shadow="({ axis, value }) => updateProperty(axis, value)"
         />
       </div>