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 = []
+      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>

src/i18n/en.json

@@ -769,8 +769,16 @@
           "only_state": "Component only has default state",
           "components": {
             "normal": {
-              "normal": "Normal state",
-              "variant": "Default variant"
+              "state": "Normal",
+              "variant": "Default"
+            },
+            "Alert": {
+              "friendlyName": "Alert",
+              "variants": {
+                "error": "Error",
+                "warning": "Warning",
+                "success": "Success"
+              }
             },
             "Button": {
               "friendlyName": "Button",

src/services/theme_data/theme_data_3.service.js

@@ -231,6 +231,7 @@ export const init = ({
     .map(({ data }) => data)
 
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
+  const nonEditableComponents = new Set(Object.values(components).filter(c => c.notEditable).map(c => c.name))
 
   const processCombination = (combination) => {
     const selector = ruleToSelector(combination, true)
@@ -240,7 +241,11 @@ export const init = ({
     const soloSelector = selector.split(/ /g).slice(-1)[0]
 
     const lowerLevelSelector = parentSelector
-    const lowerLevelBackground = computed[lowerLevelSelector]?.background
+    let lowerLevelBackground = computed[lowerLevelSelector]?.background
+    if (editMode && !lowerLevelBackground) {
+      // FIXME hack for editor until it supports handling component backgrounds
+      lowerLevelBackground = '#00FFFF'
+    }
     const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
     const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
 
@@ -448,8 +453,8 @@ export const init = ({
     let validInnerComponents
     if (editMode) {
       const temp = (component.validInnerComponentsLite || component.validInnerComponents || [])
-      validInnerComponents = temp.filter(c => virtualComponents.has(c))
-    } else if (editMode) {
+      validInnerComponents = temp.filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
+    } else if (liteMode) {
       validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || [])
     } else {
       validInnerComponents = component.validInnerComponents || []