fix various things

frontend/code/app.ts

@@ -1,4 +1,3 @@
-import { getComponentByElement } from './componentManagement';
 import { Debouncer } from './debouncer';
 import {
     callRemoteMethodDiscardResponse,

frontend/code/components/flowContainer.ts

@@ -1,6 +1,5 @@
 import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
-import { componentsById } from '../componentManagement';
 
 export type FlowState = ComponentState & {
     _type_: 'FlowContainer-builtin';

frontend/code/components/link.ts

@@ -1,4 +1,3 @@
-import { componentsById } from '../componentManagement';
 import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { hijackLinkElement } from '../utils';

frontend/code/components/overlay.ts

@@ -9,16 +9,14 @@ export type OverlayState = ComponentState & {
 export class OverlayComponent extends ComponentBase {
     state: Required<OverlayState>;
 
-    private onWindowResize: () => void;
+    private overlayElement: HTMLElement;
 
     createElement(): HTMLElement {
-        let element = document.createElement('div');
-        element.classList.add('rio-overlay');
-        return element;
-    }
+        this.overlayElement = document.createElement('div');
+        this.overlayElement.classList.add('rio-overlay');
+        document.body.firstChild!.appendChild(this.overlayElement);
 
-    onDestruction(): void {
-        window.removeEventListener('resize', this.onWindowResize);
+        return document.createElement('div');
     }
 
     updateElement(
@@ -27,6 +25,10 @@ export class OverlayComponent extends ComponentBase {
     ): void {
         super.updateElement(deltaState, latentComponents);
 
-        this.replaceOnlyChild(latentComponents, deltaState.content);
+        this.replaceOnlyChild(
+            latentComponents,
+            deltaState.content,
+            this.overlayElement
+        );
     }
 }

frontend/code/components/switcherBar.ts

@@ -116,10 +116,16 @@ export class SwitcherBarComponent extends ComponentBase {
     ): HTMLElement {
         let optionElement = document.createElement('div');
         optionElement.classList.add('rio-switcher-bar-option');
+        optionElement.style.justifyContent = 'center';
 
         // Icon
         if (iconSvg !== null) {
             optionElement.innerHTML = iconSvg;
+
+            // `space-between` looks ugly if there's only a single child (the
+            // child is at the top instead of centered), so only use that if we
+            // have an icon *and* text
+            optionElement.style.justifyContent = 'space-between';
         }
 
         // Text

frontend/code/components/themeContextSwitcher.ts

@@ -12,7 +12,9 @@ export class ThemeContextSwitcherComponent extends ComponentBase {
     state: Required<ThemeContextSwitcherState>;
 
     createElement(): HTMLElement {
-        return document.createElement('div');
+        let element = document.createElement('div');
+        element.classList.add('rio-single-container');
+        return element;
     }
 
     updateElement(

frontend/code/components/tooltip.ts

@@ -13,9 +13,7 @@ export type TooltipState = ComponentState & {
 export class TooltipComponent extends ComponentBase {
     state: Required<TooltipState>;
 
-    private anchorContainer: HTMLElement;
-    private labelElement: HTMLElement;
-
+    private popupElement: HTMLElement;
     private popupManager: PopupManager;
 
     createElement(): HTMLElement {
@@ -23,33 +21,27 @@ export class TooltipComponent extends ComponentBase {
         let element = document.createElement('div');
         element.classList.add('rio-tooltip');
 
-        element.innerHTML = `
-            <div class="rio-tooltip-anchor"></div>
-            <div class="rio-tooltip-label rio-switcheroo-hud"></div>
-        `;
-
-        this.anchorContainer = element.querySelector(
-            '.rio-tooltip-anchor'
-        ) as HTMLElement;
-
-        this.labelElement = element.querySelector(
-            '.rio-tooltip-label'
-        ) as HTMLElement;
+        this.popupElement = document.createElement('div');
+        this.popupElement.classList.add(
+            'rio-tooltip-popup',
+            'rio-popup-animation-scale',
+            'rio-switcheroo-hud'
+        );
 
         // Listen for events
-        this.anchorContainer.addEventListener('mouseover', () => {
+        element.addEventListener('mouseover', () => {
             this.popupManager.isOpen = true;
         });
 
-        this.anchorContainer.addEventListener('mouseout', () => {
+        element.addEventListener('mouseout', () => {
             this.popupManager.isOpen = false;
         });
 
         // Initialize the popup manager. Many of these values will be
         // overwritten by the updateElement method.
         this.popupManager = new PopupManager(
-            this.anchorContainer,
-            this.labelElement,
+            element,
+            this.popupElement,
             'center',
             0.5,
             0.0
@@ -69,7 +61,7 @@ export class TooltipComponent extends ComponentBase {
             this.replaceOnlyChild(
                 latentComponents,
                 deltaState.anchor,
-                this.anchorContainer
+                this.element
             );
         }
 
@@ -78,7 +70,7 @@ export class TooltipComponent extends ComponentBase {
             this.replaceOnlyChild(
                 latentComponents,
                 deltaState._tip_component,
-                this.labelElement
+                this.popupElement
             );
         }
 

frontend/code/popupManager.ts

@@ -12,6 +12,7 @@
 /// While open, the content is assigned the CSS class `rio-popup-manager-open`.
 
 import { pixelsPerRem } from './app';
+import { commitCss } from './utils';
 
 /// Will always be on top of everything else.
 export class PopupManager {
@@ -48,11 +49,7 @@ export class PopupManager {
         this.gap = gap;
 
         // Prepare the content
-        //
-        // Note that the content is always present, even if not visible. This is
-        // so it can play CSS animations when it appears/disappears.
         this.content.classList.add('rio-popup-manager-content'); // `rio-popup` is taken by the `Popup` component
-        document.body.appendChild(this.content);
     }
 
     destroy(): void {
@@ -67,10 +64,13 @@ export class PopupManager {
         // Easy case: Hide the content
         if (!open) {
             this.content.classList.remove('rio-popup-manager-open');
+            this.content.remove();
             return;
         }
 
         // Show the content
+        document.body.appendChild(this.content);
+        commitCss(this.content);
         this.content.classList.add('rio-popup-manager-open');
 
         // If the popup position is set to `auto`, convert it to one of the

frontend/css/style.scss

@@ -314,8 +314,8 @@ select {
 
     grid-template-columns: minmax(min-content, 1fr) min-content;
 
-    // The user's root component
-    & > *:first-child {
+    // The user's root component and the contents of overlays
+    & > * {
         z-index: $z-index-user-root;
 
         grid-row: 1;
@@ -323,7 +323,7 @@ select {
     }
 
     // The connection lost popup
-    & > *:nth-child(2) {
+    & > .rio-connection-lost-popup {
         z-index: $z-index-error-popup;
 
         grid-row: 1;
@@ -331,7 +331,7 @@ select {
     }
 
     // The dev tools sidebar
-    & > *:nth-child(3) {
+    & > .rio-dev-tools {
         z-index: $z-index-dev-tools;
 
         grid-row: 1;
@@ -1264,14 +1264,9 @@ $rio-input-box-text-distance-from-bottom: 0.4rem; // To be aligned with the <inp
 // Overlay
 .rio-overlay {
     pointer-events: none;
-    position: fixed !important;
-
-    top: 0 !important;
-    left: 0 !important;
-    width: unset !important;
-    height: unset !important;
-
     z-index: $z-index-overlay;
+
+    @include single-container();
 }
 
 // Spacer
@@ -1672,6 +1667,14 @@ $rio-input-box-text-distance-from-bottom: 0.4rem; // To be aligned with the <inp
 
     // Center the text
     @include center-content();
+
+    text-wrap: nowrap;
+}
+
+.rio-link:not(.rio-text-link) {
+    // Remove the underline. For some reason it's necessary to set this on the
+    // link even though our text has its own `text-decoration` setting anyway
+    text-decoration: none;
 }
 
 // ScrollTarget
@@ -2070,7 +2073,6 @@ $rio-input-box-text-distance-from-bottom: 0.4rem; // To be aligned with the <inp
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-between;
 
     padding: 0.5rem;
     box-sizing: border-box;
@@ -2649,56 +2651,26 @@ $rio-input-box-text-distance-from-bottom: 0.4rem; // To be aligned with the <inp
 
 // Tooltip
 .rio-tooltip {
-    pointer-events: none;
-}
-
-.rio-tooltip-anchor {
     pointer-events: auto;
-    position: relative;
+
+    @include single-container();
 }
 
-.rio-tooltip-label > * {
-    position: relative !important;
-}
-
-.rio-tooltip-label {
+.rio-tooltip-popup {
     pointer-events: none;
 
-    position: absolute;
-
     width: min(max-content, 100vw);
     padding: 0.5rem;
     border-radius: var(--rio-global-corner-radius-small);
 
     background: var(--rio-global-hud-bg);
     box-shadow: 0 0.1rem 0.2rem var(--rio-global-shadow-color);
-
-    transform: scale(0);
-    opacity: 0;
-
-    transition:
-        transform 0.2s linear,
-        opacity 0.1s ease-in-out;
 }
 
-.rio-tooltip-label * {
+.rio-tooltip-popup * {
     pointer-events: none !important;
 }
 
-.rio-popup-content.rio-popup-manager-open {
-    transform: scale(1);
-    opacity: 1;
-}
-
-.rio-tooltip-label.rio-popup-manager-open {
-    transform: scale(1);
-    opacity: 1;
-
-    transition:
-        transform 0.2s $transition-timing-overshoot,
-        opacity 0.1s ease-in-out;
-}
-
 // Build failed component
 .rio-build-failed {
     pointer-events: auto;
@@ -2781,6 +2753,7 @@ $rio-input-box-text-distance-from-bottom: 0.4rem; // To be aligned with the <inp
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 1rem;
 }
 
 .rio-code-explorer-source-code {
@@ -2794,11 +2767,17 @@ $rio-input-box-text-distance-from-bottom: 0.4rem; // To be aligned with the <inp
 
     position: relative;
     width: min-content;
+    padding: 1rem;
 
     background: var(--rio-local-bg-variant);
     border-radius: var(--rio-global-corner-radius-medium);
 }
 
+.rio-code-explorer-arrow {
+    width: 3rem;
+    height: 3rem;
+}
+
 .rio-code-explorer-build-result {
     position: relative;
 }

rio/components/component.py

@@ -297,6 +297,7 @@ class Component(abc.ABC, metaclass=ComponentMeta):
             for base_cls in cls.__bases__:
                 if (
                     base_cls is not __class__
+                    and base_cls.__name__ != "FundamentalComponent"
                     and issubclass(base_cls, __class__)
                     and base_cls.__module__.startswith("rio.")
                 ):