Fixed an issue with the way CSS was added to the DOM. Moved @AfterTest checks to utility function so test failures aren't hidden by @AfterTest failures.

lib/src/commonTest/kotlin/world/phantasmal/lib/compression/prs/PrsCompressTests.kt

@@ -3,7 +3,6 @@ package world.phantasmal.lib.compression.prs
 import world.phantasmal.lib.buffer.Buffer
 import world.phantasmal.lib.cursor.cursor
 import kotlin.random.Random
-import kotlin.random.nextUInt
 import kotlin.test.Test
 import kotlin.test.assertEquals
 

observable/src/commonMain/kotlin/world/phantasmal/observable/value/FlatTransformedVal.kt

@@ -16,7 +16,7 @@ class FlatTransformedVal<T>(
             return if (hasNoObservers()) {
                 super.value
             } else {
-                computedVal.unsafeToNonNull<Val<T>>().value
+                computedVal.unsafeToNonNull().value
             }
         }
 

observable/src/commonTest/kotlin/world/phantasmal/observable/ObservableTests.kt

@@ -14,7 +14,7 @@ abstract class ObservableTests : TestSuite() {
     protected abstract fun create(): ObservableAndEmit
 
     @Test
-    fun observable_calls_observers_when_events_are_emitted() {
+    fun observable_calls_observers_when_events_are_emitted() = test {
         val (observable, emit) = create()
         var changes = 0
 
@@ -36,7 +36,7 @@ abstract class ObservableTests : TestSuite() {
     }
 
     @Test
-    fun observable_does_not_call_observers_after_they_are_disposed() {
+    fun observable_does_not_call_observers_after_they_are_disposed() = test {
         val (observable, emit) = create()
         var changes = 0
 

observable/src/commonTest/kotlin/world/phantasmal/observable/value/FlatTransformedValDependentValEmitsTests.kt

@@ -13,7 +13,7 @@ class FlatTransformedValDependentValEmitsTests : RegularValTests() {
      * same.
      */
     @Test
-    fun emits_a_change_when_its_direct_val_dependency_changes() {
+    fun emits_a_change_when_its_direct_val_dependency_changes() = test {
         val v = SimpleVal(SimpleVal(7))
         val fv = FlatTransformedVal(listOf(v)) { v.value }
         var observedValue: Int? = null

observable/src/commonTest/kotlin/world/phantasmal/observable/value/RegularValTests.kt

@@ -13,7 +13,7 @@ abstract class RegularValTests : ValTests() {
     protected abstract fun createBoolean(bool: Boolean): ValAndEmit<Boolean>
 
     @Test
-    fun val_boolean_extensions() {
+    fun val_boolean_extensions() = test {
         listOf(true, false).forEach { bool ->
             val (value) = createBoolean(bool)
 

observable/src/commonTest/kotlin/world/phantasmal/observable/value/StaticValTests.kt

@@ -5,7 +5,7 @@ import kotlin.test.Test
 
 class StaticValTests : TestSuite() {
     @Test
-    fun observing_StaticVal_should_never_create_leaks() {
+    fun observing_StaticVal_should_never_create_leaks() = test {
         val static = StaticVal("test value")
 
         static.observe {}

observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValCreationTests.kt

@@ -5,27 +5,27 @@ import kotlin.test.*
 
 class ValCreationTests : TestSuite() {
     @Test
-    fun test_value() {
+    fun test_value() = test {
         assertEquals(7, value(7).value)
     }
 
     @Test
-    fun test_trueVal() {
+    fun test_trueVal() = test {
         assertTrue(trueVal().value)
     }
 
     @Test
-    fun test_falseVal() {
+    fun test_falseVal() = test {
         assertFalse(falseVal().value)
     }
 
     @Test
-    fun test_nullVal() {
+    fun test_nullVal() = test {
         assertNull(nullVal().value)
     }
 
     @Test
-    fun test_mutableVal_with_initial_value() {
+    fun test_mutableVal_with_initial_value() = test {
         val v = mutableVal(17)
 
         assertEquals(17, v.value)
@@ -36,7 +36,7 @@ class ValCreationTests : TestSuite() {
     }
 
     @Test
-    fun test_mutableVal_with_getter_and_setter() {
+    fun test_mutableVal_with_getter_and_setter() = test {
         var x = 17
         val v = mutableVal({ x }, { x = it })
 

observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValTests.kt

@@ -19,7 +19,7 @@ abstract class ValTests : ObservableTests() {
      * Otherwise it should only call the observer when it changes.
      */
     @Test
-    fun val_respects_call_now_argument() {
+    fun val_respects_call_now_argument() = test {
         val (value, emit) = create()
         var changes = 0
 

observable/src/commonTest/kotlin/world/phantasmal/observable/value/list/ListValTests.kt

@@ -14,7 +14,7 @@ abstract class ListValTests : ValTests() {
     abstract override fun create(): ListValAndAdd
 
     @Test
-    fun listVal_updates_sizeVal_correctly() {
+    fun listVal_updates_sizeVal_correctly() = test {
         val (list: List<*>, add) = create()
 
         assertEquals(0, list.sizeVal.value)

test-utils/build.gradle.kts

@@ -2,6 +2,8 @@ plugins {
     kotlin("multiplatform")
 }
 
+val coroutinesVersion: String by project.ext
+
 kotlin {
     js {
         browser {}
@@ -13,10 +15,11 @@ kotlin {
                 api(project(":core"))
                 api(kotlin("test-common"))
                 api(kotlin("test-annotations-common"))
+                api("org.jetbrains.kotlinx:kotlinx-coroutines-core:$coroutinesVersion")
             }
         }
 
-        val jsMain by getting {
+        named("jsMain") {
             dependencies {
                 api(kotlin("test-js"))
             }

test-utils/src/commonMain/kotlin/world/phantasmal/testUtils/TestSuite.kt

@@ -4,31 +4,23 @@ import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Job
 import world.phantasmal.core.disposable.Disposer
 import world.phantasmal.core.disposable.TrackedDisposable
-import kotlin.test.AfterTest
-import kotlin.test.BeforeTest
 import kotlin.test.assertEquals
 
 abstract class TestSuite {
-    private var initialDisposableCount: Int = 0
+    fun test(block: TestContext.() -> Unit) {
-    private var _disposer: Disposer? = null
+        val initialDisposableCount = TrackedDisposable.disposableCount
+        val disposer = Disposer()
 
-    protected val disposer: Disposer get() = _disposer!!
+        block(TestContext(disposer))
-
-    protected val scope: CoroutineScope = object : CoroutineScope {
-        override val coroutineContext = Job()
-    }
-
-    @BeforeTest
-    fun before() {
-        initialDisposableCount = TrackedDisposable.disposableCount
-        _disposer = Disposer()
-    }
-
-    @AfterTest
-    fun after() {
-        _disposer!!.dispose()
 
+        disposer.dispose()
         val leakCount = TrackedDisposable.disposableCount - initialDisposableCount
         assertEquals(0, leakCount, "TrackedDisposables were leaked")
     }
+
+    class TestContext(val disposer: Disposer) {
+        val scope: CoroutineScope = object : CoroutineScope {
+            override val coroutineContext = Job()
+        }
+    }
 }

web/src/main/kotlin/world/phantasmal/web/application/widgets/ApplicationWidget.kt

@@ -9,18 +9,21 @@ class ApplicationWidget(
     scope: CoroutineScope,
     private val navigationWidget: NavigationWidget,
     private val mainContentWidget: MainContentWidget,
-) : Widget(scope, listOf(::style)) {
+) : Widget(scope) {
     override fun Node.createElement() =
-        div(className = "pw-application-application") {
+        div {
+            className = "pw-application-application"
+
             addChild(navigationWidget)
             addChild(mainContentWidget)
         }
-}
 
-@Suppress("CssUnusedSymbol")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol")
-.pw-application-application {
+            // language=css
+            style("""
+                .pw-application-application {
                     position: fixed;
                     top: 0;
                     bottom: 0;
@@ -28,9 +31,12 @@ private fun style() = """
                     right: 0;
                     display: flex;
                     flex-direction: column;
-}
+                }
-.pw-application-application .pw-application-main-content {
+                .pw-application-application .pw-application-main-content {
                     flex-grow: 1;
                     overflow: hidden;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/application/widgets/MainContentWidget.kt

@@ -13,27 +13,33 @@ class MainContentWidget(
     scope: CoroutineScope,
     private val ctrl: MainContentController,
     private val toolViews: Map<PwTool, (CoroutineScope) -> Widget>,
-) : Widget(scope, listOf(::style)) {
+) : Widget(scope) {
     override fun Node.createElement() =
-        div(className = "pw-application-main-content") {
+        div {
+            className = "pw-application-main-content"
+
             ctrl.tools.forEach { (tool, active) ->
                 toolViews[tool]?.let { createWidget ->
                     addChild(LazyLoader(scope, hidden = !active, createWidget = createWidget))
                 }
             }
         }
-}
 
-@Suppress("CssUnusedSymbol")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol")
-.pw-application-main-content {
+            // language=css
+            style("""
+                .pw-application-main-content {
                     display: flex;
                     flex-direction: column;
-}
+                }
 
-.pw-application-main-content > * {
+                .pw-application-main-content > * {
                     flex-grow: 1;
                     overflow: hidden;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/application/widgets/NavigationWidget.kt

@@ -7,46 +7,49 @@ import world.phantasmal.webui.dom.div
 import world.phantasmal.webui.widgets.Widget
 
 class NavigationWidget(scope: CoroutineScope, private val ctrl: NavigationController) :
-    Widget(scope, listOf(::style)) {
+    Widget(scope) {
     override fun Node.createElement() =
-        div(className = "pw-application-navigation") {
+        div {
+            className = "pw-application-navigation"
+
             ctrl.tools.forEach { (tool, active) ->
                 addChild(PwToolButton(scope, tool, active) { ctrl.setCurrentTool(tool) })
             }
         }
-}
 
-@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
-.pw-application-navigation {
+            // language=css
+            style("""
+                .pw-application-navigation {
                     box-sizing: border-box;
                     display: flex;
                     flex-direction: row;
                     align-items: stretch;
                     background-color: hsl(0, 0%, 10%);
                     border-bottom: solid 2px var(--pw-bg-color);
-}
+                }
                 
-.pw-application-navigation-spacer {
+                .pw-application-navigation-spacer {
                     flex-grow: 1;
-}
+                }
                 
-.pw-application-navigation-server {
+                .pw-application-navigation-server {
                     display: flex;
                     align-items: center;
-}
+                }
                 
-.pw-application-navigation-server > * {
+                .pw-application-navigation-server > * {
                     margin: 0 2px;
-}
+                }
                 
-.pw-application-navigation-time {
+                .pw-application-navigation-time {
                     display: flex;
                     align-items: center;
-}
+                }
                 
-.pw-application-navigation-github {
+                .pw-application-navigation-github {
                     display: flex;
                     flex-direction: row;
                     align-items: center;
@@ -54,9 +57,12 @@ private fun style() = """
                     width: 30px;
                     font-size: 16px;
                     color: var(--pw-control-text-color);
-}
+                }
                 
-.pw-application-navigation-github:hover {
+                .pw-application-navigation-github:hover {
                     color: var(--pw-control-text-color-hover);
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/application/widgets/PwToolButton.kt

@@ -14,30 +14,36 @@ class PwToolButton(
     private val tool: PwTool,
     private val toggled: Observable<Boolean>,
     private val mouseDown: () -> Unit,
-) : Control(scope, listOf(::style)) {
+) : Control(scope) {
     private val inputId = "pw-application-pw-tool-button-${tool.name.toLowerCase()}"
 
     override fun Node.createElement() =
-        span(className = "pw-application-pw-tool-button") {
+        span {
-            input(type = "radio", id = inputId) {
+            className = "pw-application-pw-tool-button"
+
+            input {
+                type = "radio"
+                id = inputId
                 name = "pw-application-pw-tool-button"
                 observe(toggled) { checked = it }
             }
-            label(htmlFor = inputId) {
+            label {
+                htmlFor = inputId
                 textContent = tool.uiName
                 onmousedown = { mouseDown() }
             }
         }
-}
 
-@Suppress("CssUnresolvedCustomProperty")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnresolvedCustomProperty")
-.pw-application-pw-tool-button input {
+            // language=css
+            style("""
+                .pw-application-pw-tool-button input {
                     display: none;
-}
+                }
                 
-.pw-application-pw-tool-button label {
+                .pw-application-pw-tool-button label {
                     box-sizing: border-box;
                     display: inline-flex;
                     flex-direction: row;
@@ -46,15 +52,18 @@ private fun style() = """
                     height: 100%;
                     padding: 0 20px;
                     color: hsl(0, 0%, 65%);
-}
+                }
                 
-.pw-application-pw-tool-button label:hover {
+                .pw-application-pw-tool-button label:hover {
                     color: hsl(0, 0%, 85%);
                     background-color: hsl(0, 0%, 12%);
-}
+                }
                 
-.pw-application-pw-tool-button input:checked + label {
+                .pw-application-pw-tool-button input:checked + label {
                     color: hsl(0, 0%, 85%);
                     background-color: var(--pw-bg-color);
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/core/widgets/DockWidget.kt

@@ -46,7 +46,7 @@ class DockWidget(
     scope: CoroutineScope,
     hidden: Val<Boolean> = falseVal(),
     private val item: DockedItem,
-) : Widget(scope, listOf(::style), hidden) {
+) : Widget(scope, hidden) {
     private lateinit var goldenLayout: GoldenLayout
 
     init {
@@ -56,7 +56,9 @@ class DockWidget(
     }
 
     override fun Node.createElement() =
-        div(className = "pw-core-dock") {
+        div {
+            className = "pw-core-dock"
+
             val idToCreate = mutableMapOf<String, (CoroutineScope) -> Widget>()
 
             val config = newJsObject<GoldenLayout.Config> {
@@ -141,29 +143,30 @@ class DockWidget(
                 }
         }
     }
-}
 
-// Use #pw-root for higher specificity than the default GoldenLayout CSS.
+    companion object {
-@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
+        init {
-// language=css
+            // Use #pw-root for higher specificity than the default GoldenLayout CSS.
-private fun style() = """
+            @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
-.pw-core-dock {
+            // language=css
+            style("""
+                .pw-core-dock {
                     width: 100%;
                     height: 100%;
-}
+                }
                 
-#pw-root .lm_header {
+                #pw-root .lm_header {
                     box-sizing: border-box;
                     height: ${HEADER_HEIGHT + 4}px;
                     padding: 3px 0 0 0;
                     border-bottom: var(--pw-border);
-}
+                }
                 
-#pw-root .lm_header .lm_tabs {
+                #pw-root .lm_header .lm_tabs {
                     padding: 0 3px;
-}
+                }
                 
-#pw-root .lm_header .lm_tabs .lm_tab {
+                #pw-root .lm_header .lm_tabs .lm_tab {
                     cursor: default;
                     display: inline-flex;
                     align-items: center;
@@ -174,24 +177,24 @@ private fun style() = """
                     background-color: hsl(0, 0%, 12%);
                     color: hsl(0, 0%, 75%);
                     font-size: 13px;
-}
+                }
                 
-#pw-root .lm_header .lm_tabs .lm_tab:hover {
+                #pw-root .lm_header .lm_tabs .lm_tab:hover {
                     background-color: hsl(0, 0%, 18%);
                     color: hsl(0, 0%, 85%);
-}
+                }
                 
-#pw-root .lm_header .lm_tabs .lm_tab.lm_active {
+                #pw-root .lm_header .lm_tabs .lm_tab.lm_active {
                     background-color: var(--pw-bg-color);
                     color: hsl(0, 0%, 90%);
                     border-bottom-color: var(--pw-bg-color);
-}
+                }
                 
-#pw-root .lm_header .lm_controls > li {
+                #pw-root .lm_header .lm_controls > li {
                     cursor: default;
-}
+                }
                 
-#pw-root .lm_header .lm_controls .lm_close {
+                #pw-root .lm_header .lm_controls .lm_close {
                     /* a white 9x9 X shape */
                     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);
                     background-position: center center;
@@ -199,43 +202,46 @@ private fun style() = """
                     cursor: pointer;
                     opacity: 0.4;
                     transition: opacity 300ms ease;
-}
+                }
                 
-#pw-root .lm_header .lm_controls .lm_close:hover {
+                #pw-root .lm_header .lm_controls .lm_close:hover {
                     opacity: 1;
-}
+                }
                 
-#pw-root .lm_content > * {
+                #pw-root .lm_content > * {
                     width: 100%;
                     /* Subtract HEADER_HEIGHT_DIFF px as workaround for bug related to headerHeight. */
                     height: calc(100% - ${HEADER_HEIGHT_DIFF}px);
-}
+                }
                 
-#pw-root .lm_splitter {
+                #pw-root .lm_splitter {
                     box-sizing: border-box;
                     background-color: hsl(0, 0%, 20%);
-}
+                }
                 
-#pw-root .lm_splitter.lm_vertical {
+                #pw-root .lm_splitter.lm_vertical {
                     border-top: var(--pw-border);
                     border-bottom: var(--pw-border);
-}
+                }
                 
-#pw-root .lm_splitter.lm_horizontal {
+                #pw-root .lm_splitter.lm_horizontal {
                     border-left: var(--pw-border);
                     border-right: var(--pw-border);
-}
+                }
                 
-#pw-root .lm_dragProxy > .lm_content {
+                #pw-root .lm_dragProxy > .lm_content {
                     box-sizing: border-box;
                     background-color: var(--pw-bg-color);
                     border-left: var(--pw-border);
                     border-right: var(--pw-border);
                     border-bottom: var(--pw-border);
-}
+                }
                 
-#pw-root .lm_dropTargetIndicator {
+                #pw-root .lm_dropTargetIndicator {
                     box-sizing: border-box;
                     background-color: hsla(0, 0%, 50%, 0.2);
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/core/widgets/RendererWidget.kt

@@ -12,9 +12,11 @@ import kotlin.math.floor
 class RendererWidget(
     scope: CoroutineScope,
     private val createEngine: (HTMLCanvasElement) -> Engine,
-) : Widget(scope, listOf(::style)) {
+) : Widget(scope) {
     override fun Node.createElement() =
-        canvas(className = "pw-core-renderer") {
+        canvas {
+            className = "pw-core-renderer"
+
             observeResize()
             addDisposable(QuestRenderer(this, createEngine))
         }
@@ -24,13 +26,17 @@ class RendererWidget(
         canvas.width = floor(width).toInt()
         canvas.height = floor(height).toInt()
     }
-}
 
-@Suppress("CssUnusedSymbol")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol")
-.pw-core-renderer {
+            // language=css
+            style("""
+                .pw-core-renderer {
                     width: 100%;
                     height: 100%;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/core/widgets/UnavailableWidget.kt

@@ -0,0 +1,39 @@
+package world.phantasmal.web.core.widgets
+
+import kotlinx.coroutines.CoroutineScope
+import org.w3c.dom.Node
+import world.phantasmal.observable.value.Val
+import world.phantasmal.observable.value.trueVal
+import world.phantasmal.webui.dom.div
+import world.phantasmal.webui.widgets.Label
+import world.phantasmal.webui.widgets.Widget
+
+class UnavailableWidget(
+    scope: CoroutineScope,
+    hidden: Val<Boolean>,
+    private val message: String,
+) : Widget(scope, hidden) {
+    override fun Node.createElement() =
+        div {
+            className = "pw-core-unavailable"
+
+            addWidget(Label(scope, disabled = trueVal(), text = message))
+        }
+
+    companion object {
+        init {
+            @Suppress("CssUnusedSymbol")
+            // language=css
+            style("""
+                .pw-core-unavailable {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    text-align: center;
+                }
+            """.trimIndent())
+        }
+    }
+}

web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HelpWidget.kt

@@ -6,9 +6,11 @@ import world.phantasmal.webui.dom.div
 import world.phantasmal.webui.dom.p
 import world.phantasmal.webui.widgets.Widget
 
-class HelpWidget(scope: CoroutineScope) : Widget(scope, listOf(::style)) {
+class HelpWidget(scope: CoroutineScope) : Widget(scope) {
     override fun Node.createElement() =
-        div(className = "pw-hunt-optimizer-help") {
+        div {
+            className = "pw-hunt-optimizer-help"
+
             p {
                 textContent =
                     "Add some items with the combo box on the left to see the optimal combination of hunt methods on the right."
@@ -25,18 +27,22 @@ class HelpWidget(scope: CoroutineScope) : Widget(scope, listOf(::style)) {
                     "The optimal result is calculated using linear optimization. The optimizer takes into account rare enemies and the fact that pan arms can be split in two."
             }
         }
-}
 
-@Suppress("CssUnusedSymbol")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol")
-.pw-hunt-optimizer-help {
+            // language=css
+            style("""
+                .pw-hunt-optimizer-help {
                     cursor: initial;
                     user-select: text;
-}
+                }
                 
-.pw-hunt-optimizer-help p {
+                .pw-hunt-optimizer-help p {
                     margin: 1em;
                     max-width: 600px;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HuntOptimizerWidget.kt

@@ -12,8 +12,11 @@ class HuntOptimizerWidget(
     scope: CoroutineScope,
     private val ctrl: HuntOptimizerController,
     private val createMethodsWidget: (CoroutineScope) -> MethodsWidget,
-) : Widget(scope, listOf(::style)) {
+) : Widget(scope) {
-    override fun Node.createElement() = div(className = "pw-hunt-optimizer-hunt-optimizer") {
+    override fun Node.createElement() =
+        div {
+            className = "pw-hunt-optimizer-hunt-optimizer"
+
             addChild(TabContainer(
                 scope,
                 ctrl = ctrl,
@@ -31,18 +34,22 @@ class HuntOptimizerWidget(
                 }
             ))
         }
-}
 
-@Suppress("CssUnusedSymbol")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol")
-.pw-hunt-optimizer-hunt-optimizer {
+            // language=css
+            style("""
+                .pw-hunt-optimizer-hunt-optimizer {
                     display: flex;
                     flex-direction: column;
-}
+                }
                 
-.pw-hunt-optimizer-hunt-optimizer > * {
+                .pw-hunt-optimizer-hunt-optimizer > * {
                     flex-grow: 1;
                     overflow: hidden;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsForEpisodeWidget.kt

@@ -11,19 +11,25 @@ class MethodsForEpisodeWidget(
     scope: CoroutineScope,
     private val ctrl: MethodsController,
     private val episode: Episode,
-) : Widget(scope, listOf(::style)) {
+) : Widget(scope) {
     override fun Node.createElement() =
-        div(className = "pw-hunt-optimizer-methods-for-episode") {
+        div {
+            className = "pw-hunt-optimizer-methods-for-episode"
+
             bindChildrenTo(ctrl.episodeToMethods.getValue(episode)) { method, _ ->
                 div { textContent = method.name }
             }
         }
-}
 
-@Suppress("CssUnusedSymbol")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol")
-.pw-hunt-optimizer-methods-for-episode {
+            // language=css
+            style("""
+                .pw-hunt-optimizer-methods-for-episode {
                     overflow: auto;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsWidget.kt

@@ -10,25 +10,31 @@ import world.phantasmal.webui.widgets.Widget
 class MethodsWidget(
     scope: CoroutineScope,
     private val ctrl: MethodsController,
-) : Widget(scope, listOf(::style)) {
+) : Widget(scope) {
     override fun Node.createElement() =
-        div(className = "pw-hunt-optimizer-methods") {
+        div {
+            className = "pw-hunt-optimizer-methods"
+
             addChild(TabContainer(scope, ctrl = ctrl, createWidget = { scope, tab ->
                 MethodsForEpisodeWidget(scope, ctrl, tab.episode)
             }))
         }
-}
 
-@Suppress("CssUnusedSymbol")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol")
-.pw-hunt-optimizer-methods {
+            // language=css
+            style("""
+                .pw-hunt-optimizer-methods {
                     display: flex;
                     flex-direction: column;
-}
+                }
                 
-.pw-hunt-optimizer-methods > * {
+                .pw-hunt-optimizer-methods > * {
                     flex-grow: 1;
                     overflow: hidden;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/questEditor/controllers/QuestInfoController.kt

@@ -7,5 +7,8 @@ import world.phantasmal.web.questEditor.stores.QuestEditorStore
 import world.phantasmal.webui.controllers.Controller
 
 class QuestInfoController(scope: CoroutineScope, store: QuestEditorStore) : Controller(scope) {
+    val unavailable = store.currentQuest.transform { it == null }
+    val episode: Val<String> = store.currentQuest.transform { it?.episode?.name ?: "" }
     val id: Val<Int> = store.currentQuest.flatTransform { it?.id ?: value(0) }
+    val name: Val<String> = store.currentQuest.flatTransform { it?.name ?: value("") }
 }

web/src/main/kotlin/world/phantasmal/web/questEditor/models/QuestModel.kt

@@ -1,5 +1,6 @@
 package world.phantasmal.web.questEditor.models
 
+import world.phantasmal.lib.fileFormats.quest.Episode
 import world.phantasmal.observable.value.Val
 import world.phantasmal.observable.value.mutableVal
 
@@ -9,6 +10,7 @@ class QuestModel(
     name: String,
     shortDescription: String,
     longDescription: String,
+    val episode: Episode,
 ) {
     private val _id = mutableVal(0)
     private val _language = mutableVal(0)

web/src/main/kotlin/world/phantasmal/web/questEditor/stores/ModelConversion.kt

@@ -9,6 +9,7 @@ fun convertQuestToModel(quest: Quest): QuestModel {
         quest.language,
         quest.name,
         quest.shortDescription,
-        quest.longDescription
+        quest.longDescription,
+        quest.episode,
     )
 }

web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorToolbar.kt

@@ -12,7 +12,10 @@ class QuestEditorToolbar(
     scope: CoroutineScope,
     private val ctrl: QuestEditorToolbarController,
 ) : Widget(scope) {
-    override fun Node.createElement() = div(className = "pw-quest-editor-toolbar") {
+    override fun Node.createElement() =
+        div {
+            className = "pw-quest-editor-toolbar"
+
             addChild(Toolbar(
                 scope,
                 children = listOf(

web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorWidget.kt

@@ -22,9 +22,11 @@ open class QuestEditorWidget(
     private val toolbar: Widget,
     private val createQuestInfoWidget: (CoroutineScope) -> Widget,
     private val createQuestRendererWidget: (CoroutineScope) -> Widget,
-) : Widget(scope, listOf(::style)) {
+) : Widget(scope) {
     override fun Node.createElement() =
-        div(className = "pw-quest-editor-quest-editor") {
+        div {
+            className = "pw-quest-editor-quest-editor"
+
             addChild(toolbar)
             addChild(DockWidget(
                 scope,
@@ -93,17 +95,21 @@ open class QuestEditorWidget(
                 )
             ))
         }
-}
 
-@Suppress("CssUnusedSymbol")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol")
-.pw-quest-editor-quest-editor {
+            // language=css
+            style("""
+                .pw-quest-editor-quest-editor {
                     display: flex;
                     flex-direction: column;
                     overflow: hidden;
-}
+                }
-.pw-quest-editor-quest-editor > * {
+                .pw-quest-editor-quest-editor > * {
                     flex-grow: 1;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestInfoWidget.kt

@@ -2,21 +2,29 @@ package world.phantasmal.web.questEditor.widgets
 
 import kotlinx.coroutines.CoroutineScope
 import org.w3c.dom.Node
+import world.phantasmal.observable.value.not
+import world.phantasmal.web.core.widgets.UnavailableWidget
 import world.phantasmal.web.questEditor.controllers.QuestInfoController
 import world.phantasmal.webui.dom.*
 import world.phantasmal.webui.widgets.IntInput
+import world.phantasmal.webui.widgets.TextInput
 import world.phantasmal.webui.widgets.Widget
 
 class QuestInfoWidget(
     scope: CoroutineScope,
     private val ctrl: QuestInfoController,
-) : Widget(scope, listOf(::style)) {
+) : Widget(scope) {
     override fun Node.createElement() =
-        div(className = "pw-quest-editor-quest-info", tabIndex = -1) {
+        div {
+            className = "pw-quest-editor-quest-info"
+            tabIndex = -1
+
             table {
+                hidden(ctrl.unavailable)
+
                 tr {
                     th { textContent = "Episode:" }
-                    td()
+                    td { text(ctrl.episode) }
                 }
                 tr {
                     th { textContent = "ID:" }
@@ -25,41 +33,60 @@ class QuestInfoWidget(
                             this@QuestInfoWidget.scope,
                             valueVal = ctrl.id,
                             min = 0,
-                            step = 0
+                            step = 1
+                        ))
+                    }
+                }
+                tr {
+                    th { textContent = "Name:" }
+                    td {
+                        addChild(TextInput(
+                            this@QuestInfoWidget.scope,
+                            valueVal = ctrl.name,
+                            maxLength = 32
                         ))
                     }
                 }
             }
+            addChild(UnavailableWidget(
+                scope,
+                hidden = !ctrl.unavailable,
+                message = "No quest loaded."
+            ))
         }
-}
 
-@Suppress("CssUnusedSymbol")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol")
-.pw-quest-editor-quest-info {
+            // language=css
+            style("""
+                .pw-quest-editor-quest-info {
                     box-sizing: border-box;
                     padding: 3px;
                     overflow: auto;
                     outline: none;
-}
+                }
                 
-.pw-quest-editor-quest-info table {
+                .pw-quest-editor-quest-info table {
                     width: 100%;
-}
+                }
                 
-.pw-quest-editor-quest-info th {
+                .pw-quest-editor-quest-info th {
                     text-align: left;
-}
+                }
                 
-.pw-quest-editor-quest-info .pw-text-input {
+                .pw-quest-editor-quest-info .pw-text-input {
                     width: 100%;
-}
+                }
                 
-.pw-quest-editor-quest-info .pw-text-area {
+                .pw-quest-editor-quest-info .pw-text-area {
                     width: 100%;
-}
+                }
                 
-.pw-quest-editor-quest-info textarea {
+                .pw-quest-editor-quest-info textarea {
                     width: 100%;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestRendererWidget.kt

@@ -11,20 +11,27 @@ import world.phantasmal.webui.widgets.Widget
 abstract class QuestRendererWidget(
     scope: CoroutineScope,
     private val createEngine: (HTMLCanvasElement) -> Engine,
-) : Widget(scope, listOf(::style)) {
+) : Widget(scope) {
-    override fun Node.createElement() = div(className = "pw-quest-editor-quest-renderer") {
+    override fun Node.createElement() =
+        div {
+            className = "pw-quest-editor-quest-renderer"
+
             addChild(RendererWidget(scope, createEngine))
         }
-}
 
-@Suppress("CssUnusedSymbol")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol")
-.pw-quest-editor-quest-renderer {
+            // language=css
+            style("""
+                .pw-quest-editor-quest-renderer {
                     display: flex;
                     overflow: hidden;
-}
+                }
-.pw-quest-editor-quest-renderer > * {
+                .pw-quest-editor-quest-renderer > * {
                     flex-grow: 1;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

web/src/test/kotlin/world/phantasmal/web/application/ApplicationTests.kt

@@ -17,7 +17,7 @@ import kotlin.test.Test
 
 class ApplicationTests : TestSuite() {
     @Test
-    fun initialization_and_shutdown_should_succeed_without_throwing() {
+    fun initialization_and_shutdown_should_succeed_without_throwing() = test {
         (listOf(null) + PwTool.values().toList()).forEach { tool ->
             Disposer().use { disposer ->
                 val httpClient = HttpClient {

web/src/test/kotlin/world/phantasmal/web/core/controllers/PathAwareTabControllerTests.kt

@@ -10,7 +10,7 @@ import kotlin.test.assertFalse
 
 class PathAwareTabControllerTests : TestSuite() {
     @Test
-    fun activeTab_is_initialized_correctly() {
+    fun activeTab_is_initialized_correctly() = test {
         setup { ctrl, appUrl ->
             assertEquals("/b", ctrl.activeTab.value?.path)
             assertFalse(appUrl.canGoBack)
@@ -19,7 +19,7 @@ class PathAwareTabControllerTests : TestSuite() {
     }
 
     @Test
-    fun applicationUrl_changes_when_activeTab_changes() {
+    fun applicationUrl_changes_when_activeTab_changes() = test {
         setup { ctrl, appUrl ->
             ctrl.setActiveTab(ctrl.tabs[2])
 
@@ -30,7 +30,7 @@ class PathAwareTabControllerTests : TestSuite() {
     }
 
     @Test
-    fun activeTab_changes_when_applicationUrl_changes() {
+    fun activeTab_changes_when_applicationUrl_changes() = test {
         setup { ctrl, applicationUrl ->
             applicationUrl.pushUrl("/${PwTool.HuntOptimizer.slug}/c")
 
@@ -39,7 +39,7 @@ class PathAwareTabControllerTests : TestSuite() {
     }
 
     @Test
-    fun applicationUrl_changes_when_switch_to_tool_with_tabs() {
+    fun applicationUrl_changes_when_switch_to_tool_with_tabs() = test {
         val appUrl = TestApplicationUrl("/")
         val uiStore = disposer.add(UiStore(scope, appUrl))
 
@@ -66,7 +66,7 @@ class PathAwareTabControllerTests : TestSuite() {
         assertEquals("/${uiStore.defaultTool.slug}", appUrl.url.value)
     }
 
-    private fun setup(
+    private fun TestContext.setup(
         block: (PathAwareTabController<PathAwareTab>, applicationUrl: TestApplicationUrl) -> Unit,
     ) {
         val applicationUrl = TestApplicationUrl("/${PwTool.HuntOptimizer.slug}/b")

web/src/test/kotlin/world/phantasmal/web/core/store/UiStoreTests.kt

@@ -9,7 +9,7 @@ import kotlin.test.assertEquals
 
 class UiStoreTests : TestSuite() {
     @Test
-    fun applicationUrl_is_initialized_correctly() {
+    fun applicationUrl_is_initialized_correctly() = test {
         val applicationUrl = TestApplicationUrl("/")
         val uiStore = disposer.add(UiStore(scope, applicationUrl))
 
@@ -18,7 +18,7 @@ class UiStoreTests : TestSuite() {
     }
 
     @Test
-    fun applicationUrl_changes_when_tool_changes() {
+    fun applicationUrl_changes_when_tool_changes() = test {
         val applicationUrl = TestApplicationUrl("/")
         val uiStore = disposer.add(UiStore(scope, applicationUrl))
 
@@ -31,7 +31,7 @@ class UiStoreTests : TestSuite() {
     }
 
     @Test
-    fun applicationUrl_changes_when_path_changes() {
+    fun applicationUrl_changes_when_path_changes() = test {
         val applicationUrl = TestApplicationUrl("/")
         val uiStore = disposer.add(UiStore(scope, applicationUrl))
 
@@ -46,7 +46,7 @@ class UiStoreTests : TestSuite() {
     }
 
     @Test
-    fun currentTool_and_path_change_when_applicationUrl_changes() {
+    fun currentTool_and_path_change_when_applicationUrl_changes() = test {
         val applicationUrl = TestApplicationUrl("/")
         val uiStore = disposer.add(UiStore(scope, applicationUrl))
 
@@ -61,7 +61,7 @@ class UiStoreTests : TestSuite() {
     }
 
     @Test
-    fun browser_navigation_stack_is_manipulated_correctly() {
+    fun browser_navigation_stack_is_manipulated_correctly() = test {
         val appUrl = TestApplicationUrl("/")
         val uiStore = disposer.add(UiStore(scope, appUrl))
 

web/src/test/kotlin/world/phantasmal/web/huntOptimizer/HuntOptimizerTests.kt

@@ -14,7 +14,7 @@ import kotlin.test.Test
 
 class HuntOptimizerTests : TestSuite() {
     @Test
-    fun initialization_and_shutdown_should_succeed_without_throwing() {
+    fun initialization_and_shutdown_should_succeed_without_throwing() = test {
         val httpClient = HttpClient {
             install(JsonFeature) {
                 serializer = KotlinxSerializer(kotlinx.serialization.json.Json {

web/src/test/kotlin/world/phantasmal/web/questEditor/QuestEditorTests.kt

@@ -14,7 +14,7 @@ import kotlin.test.Test
 
 class QuestEditorTests : TestSuite() {
     @Test
-    fun initialization_and_shutdown_should_succeed_without_throwing() {
+    fun initialization_and_shutdown_should_succeed_without_throwing() = test {
         val httpClient = HttpClient {
             install(JsonFeature) {
                 serializer = KotlinxSerializer(kotlinx.serialization.json.Json {

webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt

@@ -2,14 +2,13 @@ package world.phantasmal.webui.dom
 
 import kotlinx.browser.document
 import kotlinx.dom.appendText
-import kotlinx.dom.clear
+import org.w3c.dom.AddEventListenerOptions
-import org.w3c.dom.*
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.HTMLStyleElement
 import org.w3c.dom.events.Event
 import org.w3c.dom.events.EventTarget
 import world.phantasmal.core.disposable.Disposable
 import world.phantasmal.core.disposable.disposable
-import world.phantasmal.observable.value.list.ListVal
-import world.phantasmal.observable.value.list.ListValChangeEvent
 
 fun <E : Event> disposableListener(
     target: EventTarget,

webui/src/main/kotlin/world/phantasmal/webui/dom/DomCreation.kt

@@ -3,227 +3,68 @@ package world.phantasmal.webui.dom
 import kotlinx.browser.document
 import org.w3c.dom.*
 
-fun Node.a(
+fun Node.a(block: HTMLAnchorElement.() -> Unit = {}): HTMLAnchorElement =
-    href: String? = null,
+    appendHtmlEl("A", block)
-    id: String? = null,
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLAnchorElement.() -> Unit = {},
-): HTMLAnchorElement =
-    appendHtmlEl("A", id, className, title, tabIndex) {
-        if (href != null) this.href = href
-        block()
-    }
 
-fun Node.button(
+fun Node.button(block: HTMLButtonElement.() -> Unit = {}): HTMLButtonElement =
-    type: String? = null,
+    appendHtmlEl("BUTTON", block)
-    id: String? = null,
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLButtonElement.() -> Unit = {},
-): HTMLButtonElement =
-    appendHtmlEl("BUTTON", id, className, title, tabIndex) {
-        if (type != null) this.type = type
-        block()
-    }
 
-fun Node.canvas(
+fun Node.canvas(block: HTMLCanvasElement.() -> Unit = {}): HTMLCanvasElement =
-    id: String? = null,
+    appendHtmlEl("CANVAS", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLCanvasElement.() -> Unit = {},
-): HTMLCanvasElement =
-    appendHtmlEl("CANVAS", id, className, title, tabIndex, block)
 
-fun Node.div(
+fun Node.div(block: HTMLDivElement .() -> Unit = {}): HTMLDivElement =
-    id: String? = null,
+    appendHtmlEl("DIV", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLDivElement .() -> Unit = {},
-): HTMLDivElement =
-    appendHtmlEl("DIV", id, className, title, tabIndex, block)
 
-fun Node.form(
+fun Node.form(block: HTMLFormElement.() -> Unit = {}): HTMLFormElement =
-    id: String? = null,
+    appendHtmlEl("FORM", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLFormElement.() -> Unit = {},
-): HTMLFormElement =
-    appendHtmlEl("FORM", id, className, title, tabIndex, block)
 
-fun Node.h1(
+fun Node.h1(block: HTMLHeadingElement.() -> Unit = {}): HTMLHeadingElement =
-    id: String? = null,
+    appendHtmlEl("H1", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLHeadingElement.() -> Unit = {},
-): HTMLHeadingElement =
-    appendHtmlEl("H1", id, className, title, tabIndex, block)
 
-fun Node.h2(
+fun Node.h2(block: HTMLHeadingElement.() -> Unit = {}): HTMLHeadingElement =
-    id: String? = null,
+    appendHtmlEl("H2", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLHeadingElement.() -> Unit = {},
-): HTMLHeadingElement =
-    appendHtmlEl("H2", id, className, title, tabIndex, block)
 
-fun Node.header(
+fun Node.header(block: HTMLElement.() -> Unit = {}): HTMLElement =
-    id: String? = null,
+    appendHtmlEl("HEADER", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLElement.() -> Unit = {},
-): HTMLElement =
-    appendHtmlEl("HEADER", id, className, title, tabIndex, block)
 
-fun Node.img(
+fun Node.img(block: HTMLImageElement.() -> Unit = {}): HTMLImageElement =
-    src: String? = null,
+    appendHtmlEl("IMG", block)
-    width: Int? = null,
-    height: Int? = null,
-    alt: String? = null,
-    id: String? = null,
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLImageElement.() -> Unit = {},
-): HTMLImageElement =
-    appendHtmlEl("IMG", id, className, title, tabIndex) {
-        if (src != null) this.src = src
-        if (width != null) this.width = width
-        if (height != null) this.height = height
-        if (alt != null) this.alt = alt
-        block()
-    }
 
-fun Node.input(
+fun Node.input(block: HTMLInputElement.() -> Unit = {}): HTMLInputElement =
-    type: String? = null,
+    appendHtmlEl("INPUT", block)
-    id: String? = null,
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLInputElement.() -> Unit = {},
-): HTMLInputElement =
-    appendHtmlEl("INPUT", id, className, title, tabIndex) {
-        if (type != null) this.type = type
-        block()
-    }
 
-fun Node.label(
+fun Node.label(block: HTMLLabelElement.() -> Unit = {}): HTMLLabelElement =
-    htmlFor: String? = null,
+    appendHtmlEl("LABEL", block)
-    id: String? = null,
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLLabelElement.() -> Unit = {},
-): HTMLLabelElement =
-    appendHtmlEl("LABEL", id, className, title, tabIndex) {
-        if (htmlFor != null) this.htmlFor = htmlFor
-        block()
-    }
 
-fun Node.main(
+fun Node.main(block: HTMLElement.() -> Unit = {}): HTMLElement =
-    id: String? = null,
+    appendHtmlEl("MAIN", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLElement.() -> Unit = {},
-): HTMLElement =
-    appendHtmlEl("MAIN", id, className, title, tabIndex, block)
 
-fun Node.p(
+fun Node.p(block: HTMLParagraphElement.() -> Unit = {}): HTMLParagraphElement =
-    id: String? = null,
+    appendHtmlEl("P", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLParagraphElement.() -> Unit = {},
-): HTMLParagraphElement =
-    appendHtmlEl("P", id, className, title, tabIndex, block)
 
-fun Node.span(
+fun Node.span(block: HTMLSpanElement.() -> Unit = {}): HTMLSpanElement =
-    id: String? = null,
+    appendHtmlEl("SPAN", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLSpanElement.() -> Unit = {},
-): HTMLSpanElement =
-    appendHtmlEl("SPAN", id, className, title, tabIndex, block)
 
-fun Node.table(
+fun Node.table(block: HTMLTableElement.() -> Unit = {}): HTMLTableElement =
-    id: String? = null,
+    appendHtmlEl("TABLE", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLTableElement.() -> Unit = {},
-): HTMLTableElement =
-    appendHtmlEl("TABLE", id, className, title, tabIndex, block)
 
-fun Node.td(
+fun Node.td(block: HTMLTableCellElement.() -> Unit = {}): HTMLTableCellElement =
-    id: String? = null,
+    appendHtmlEl("TD", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLTableCellElement.() -> Unit = {},
-): HTMLTableCellElement =
-    appendHtmlEl("TD", id, className, title, tabIndex, block)
 
-fun Node.th(
+fun Node.th(block: HTMLTableCellElement.() -> Unit = {}): HTMLTableCellElement =
-    id: String? = null,
+    appendHtmlEl("TH", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLTableCellElement.() -> Unit = {},
-): HTMLTableCellElement =
-    appendHtmlEl("TH", id, className, title, tabIndex, block)
 
-fun Node.tr(
+fun Node.tr(block: HTMLTableRowElement.() -> Unit = {}): HTMLTableRowElement =
-    id: String? = null,
+    appendHtmlEl("TR", block)
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: HTMLTableRowElement.() -> Unit = {},
-): HTMLTableRowElement =
-    appendHtmlEl("TR", id, className, title, tabIndex, block)
 
-fun <T : HTMLElement> Node.appendHtmlEl(
+fun <T : HTMLElement> Node.appendHtmlEl(tagName: String, block: T.() -> Unit): T =
-    tagName: String,
+    appendChild(newHtmlEl(tagName, block)).unsafeCast<T>()
-    id: String? = null,
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: T.() -> Unit,
-): T =
-    appendChild(newHtmlEl(tagName, id, className, title, tabIndex, block)).unsafeCast<T>()
 
-fun <T : HTMLElement> newHtmlEl(
+fun <T : HTMLElement> newHtmlEl(tagName: String, block: T.() -> Unit): T =
-    tagName: String,
+    newEl(tagName, block)
-    id: String? = null,
-    className: String? = null,
-    title: String? = null,
-    tabIndex: Int? = null,
-    block: T.() -> Unit,
-): T =
-    newEl(tagName, id, className) {
-        if (title != null) this.title = title
-        if (tabIndex != null) this.tabIndex = tabIndex
-        block()
-    }
 
-private fun <T : Element> newEl(
+private fun <T : Element> newEl(tagName: String, block: T.() -> Unit): T {
-    tagName: String,
-    id: String? = null,
-    className: String?,
-    block: T.() -> Unit,
-): T {
     val el = document.createElement(tagName).unsafeCast<T>()
-    if (id != null) el.id = id
-    if (className != null) el.className = className
     el.block()
     return el
 }

webui/src/main/kotlin/world/phantasmal/webui/widgets/Button.kt

@@ -15,13 +15,18 @@ open class Button(
     private val text: String? = null,
     private val textVal: Val<String>? = null,
     private val onclick: ((MouseEvent) -> Unit)? = null,
-) : Control(scope, listOf(::style), hidden, disabled) {
+) : Control(scope, hidden, disabled) {
     override fun Node.createElement() =
-        button(className = "pw-button") {
+        button {
+            className = "pw-button"
             onclick = this@Button.onclick
 
-            span(className = "pw-button-inner") {
+            span {
-                span(className = "pw-button-center") {
+                className = "pw-button-inner"
+
+                span {
+                    className = "pw-button-center"
+
                     if (textVal != null) {
                         observe(textVal) {
                             textContent = it
@@ -35,12 +40,13 @@ open class Button(
                 }
             }
         }
-}
 
-@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
+    companion object {
+        init {
+            @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
 // language=css
-private fun style() = """
+            style("""
-.pw-button {
+                .pw-button {
                     display: inline-flex;
                     flex-direction: row;
                     align-items: stretch;
@@ -54,9 +60,9 @@ private fun style() = """
                     font-size: 13px;
                     font-family: var(--pw-font-family), sans-serif;
                     overflow: hidden;
-}
+                }
 
-.pw-button .pw-button-inner {
+                .pw-button .pw-button-inner {
                     flex-grow: 1;
                     display: inline-flex;
                     flex-direction: row;
@@ -67,47 +73,50 @@ private fun style() = """
                     padding: 3px 5px;
                     border: var(--pw-control-inner-border);
                     overflow: hidden;
-}
+                }
 
-.pw-button:hover .pw-button-inner {
+                .pw-button:hover .pw-button-inner {
                     background-color: var(--pw-control-bg-color-hover);
                     border-color: hsl(0, 0%, 40%);
                     color: var(--pw-control-text-color-hover);
-}
+                }
 
-.pw-button:active .pw-button-inner {
+                .pw-button:active .pw-button-inner {
                     background-color: hsl(0, 0%, 20%);
                     border-color: hsl(0, 0%, 30%);
                     color: hsl(0, 0%, 75%);
-}
+                }
 
-.pw-button:focus-within .pw-button-inner {
+                .pw-button:focus-within .pw-button-inner {
                     border: var(--pw-control-inner-border-focus);
-}
+                }
 
-.pw-button:disabled .pw-button-inner {
+                .pw-button:disabled .pw-button-inner {
                     background-color: hsl(0, 0%, 15%);
                     border-color: hsl(0, 0%, 25%);
                     color: hsl(0, 0%, 55%);
-}
+                }
 
-.pw-button-inner > * {
+                .pw-button-inner > * {
                     display: inline-block;
                     margin: 0 3px;
-}
+                }
 
-.pw-button-center {
+                .pw-button-center {
                     flex-grow: 1;
                     text-align: left;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
-}
+                }
 
-.pw-button-left,
+                .pw-button-left,
-.pw-button-right {
+                .pw-button-right {
                     display: inline-flex;
                     align-content: center;
                     font-size: 11px;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

webui/src/main/kotlin/world/phantasmal/webui/widgets/Control.kt

@@ -10,7 +10,6 @@ import world.phantasmal.observable.value.falseVal
  */
 abstract class Control(
     scope: CoroutineScope,
-    styles: List<() -> String>,
     hidden: Val<Boolean> = falseVal(),
     disabled: Val<Boolean> = falseVal(),
-) : Widget(scope, styles, hidden, disabled)
+) : Widget(scope, hidden, disabled)

webui/src/main/kotlin/world/phantasmal/webui/widgets/Input.kt

@@ -9,7 +9,6 @@ import world.phantasmal.webui.dom.span
 
 abstract class Input<T>(
     scope: CoroutineScope,
-    styles: List<() -> String>,
     hidden: Val<Boolean>,
     disabled: Val<Boolean>,
     label: String?,
@@ -21,12 +20,12 @@ abstract class Input<T>(
     private val value: T?,
     private val valueVal: Val<T>?,
     private val setValue: ((T) -> Unit)?,
+    private val maxLength: Int?,
     private val min: Int?,
     private val max: Int?,
     private val step: Int?,
 ) : LabelledControl(
     scope,
-    styles + ::style,
     hidden,
     disabled,
     label,
@@ -34,11 +33,12 @@ abstract class Input<T>(
     preferredLabelPosition,
 ) {
     override fun Node.createElement() =
-        span(className = "pw-input") {
+        span {
-            classList.add(className)
+            classList.add("pw-input", this@Input.className)
 
-            input(className = "pw-input-inner", type = inputType) {
+            input {
-                classList.add(inputClassName)
+                classList.add("pw-input-inner", inputClassName)
+                type = inputType
 
                 observe(this@Input.disabled) { disabled = it }
 
@@ -58,36 +58,30 @@ abstract class Input<T>(
                     setInputValue(this, this@Input.value)
                 }
 
-                if (this@Input.min != null) {
+                this@Input.maxLength?.let { maxLength = it }
-                    min = this@Input.min.toString()
+                this@Input.min?.let { min = it.toString() }
-                }
+                this@Input.max?.let { max = it.toString() }
-
+                this@Input.step?.let { step = it.toString() }
-                if (this@Input.max != null) {
-                    max = this@Input.max.toString()
-                }
-
-                if (this@Input.step != null) {
-                    step = this@Input.step.toString()
-                }
             }
         }
 
     protected abstract fun getInputValue(input: HTMLInputElement): T
 
     protected abstract fun setInputValue(input: HTMLInputElement, value: T)
-}
 
-@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
-.pw-input {
+            // language=css
+            style("""
+                .pw-input {
                     display: inline-block;
                     box-sizing: border-box;
                     height: 24px;
                     border: var(--pw-input-border);
-}
+                }
 
-.pw-input .pw-input-inner {
+                .pw-input .pw-input-inner {
                     box-sizing: border-box;
                     width: 100%;
                     height: 100%;
@@ -97,22 +91,25 @@ private fun style() = """
                     color: var(--pw-input-text-color);
                     outline: none;
                     font-size: 13px;
-}
+                }
 
-.pw-input:hover {
+                .pw-input:hover {
                     border: var(--pw-input-border-hover);
-}
+                }
 
-.pw-input:focus-within {
+                .pw-input:focus-within {
                     border: var(--pw-input-border-focus);
-}
+                }
 
-.pw-input.disabled {
+                .pw-input.disabled {
                     border: var(--pw-input-border-disabled);
-}
+                }
 
-.pw-input.disabled .pw-input-inner {
+                .pw-input.disabled .pw-input-inner {
                     color: var(--pw-input-text-color-disabled);
                     background-color: var(--pw-input-bg-color-disabled);
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

webui/src/main/kotlin/world/phantasmal/webui/widgets/Label.kt

@@ -12,22 +12,29 @@ class Label(
     disabled: Val<Boolean> = falseVal(),
     private val text: String? = null,
     private val textVal: Val<String>? = null,
-    private val htmlFor: String?,
+    private val htmlFor: String? = null,
-) : Widget(scope, listOf(::style), hidden, disabled) {
+) : Widget(scope, hidden, disabled) {
     override fun Node.createElement() =
-        label(htmlFor) {
+        label {
+            className = "pw-label"
+            this@Label.htmlFor?.let { htmlFor = it }
+
             if (textVal != null) {
-                observe(textVal) { textContent = it }
+                text(textVal)
             } else if (text != null) {
                 textContent = text
             }
         }
-}
 
-@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
+    companion object{
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
-.pw-label.disabled {
+            // language=css
+            style("""
+                .pw-label.pw-disabled {
                     color: var(--pw-text-color-disabled);
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

webui/src/main/kotlin/world/phantasmal/webui/widgets/LabelledControl.kt

@@ -11,13 +11,12 @@ enum class LabelPosition {
 
 abstract class LabelledControl(
     scope: CoroutineScope,
-    styles: List<() -> String>,
     hidden: Val<Boolean> = falseVal(),
     disabled: Val<Boolean> = falseVal(),
     label: String? = null,
     labelVal: Val<String>? = null,
     val preferredLabelPosition: LabelPosition,
-) : Control(scope, styles, hidden, disabled) {
+) : Control(scope, hidden, disabled) {
     val label: Label? by lazy {
         if (label == null && labelVal == null) {
             null

webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt

@@ -11,11 +11,13 @@ class LazyLoader(
     hidden: Val<Boolean> = falseVal(),
     disabled: Val<Boolean> = falseVal(),
     private val createWidget: (CoroutineScope) -> Widget,
-) : Widget(scope, listOf(::style), hidden, disabled) {
+) : Widget(scope, hidden, disabled) {
     private var initialized = false
 
     override fun Node.createElement() =
-        div(className = "pw-lazy-loader") {
+        div {
+            className = "pw-lazy-loader"
+
             observe(this@LazyLoader.hidden) { h ->
                 if (!h && !initialized) {
                     initialized = true
@@ -23,19 +25,23 @@ class LazyLoader(
                 }
             }
         }
-}
 
-@Suppress("CssUnusedSymbol")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol")
-.pw-lazy-loader {
+            // language=css
+            style("""
+                .pw-lazy-loader {
                     display: flex;
                     flex-direction: column;
                     align-items: stretch;
-}
+                }
 
-.pw-lazy-loader > * {
+                .pw-lazy-loader > * {
                     flex-grow: 1;
                     overflow: hidden;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

webui/src/main/kotlin/world/phantasmal/webui/widgets/NumberInput.kt

@@ -18,7 +18,6 @@ abstract class NumberInput<T : Number>(
     step: Int?,
 ) : Input<T>(
     scope,
-    listOf(::style),
     hidden,
     disabled,
     label,
@@ -30,19 +29,24 @@ abstract class NumberInput<T : Number>(
     value,
     valueVal,
     setValue,
+    maxLength = null,
     min,
     max,
     step,
-)
+) {
-
+    companion object {
-@Suppress("CssUnusedSymbol")
+        init {
-// language=css
+            @Suppress("CssUnusedSymbol")
-private fun style() = """
+            // language=css
-.pw-number-input {
+            style("""
+                .pw-number-input {
                     width: 54px;
-}
+                }
 
-.pw-number-input .pw-number-input-inner {
+                .pw-number-input .pw-number-input-inner {
                     padding-right: 1px;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt

@@ -15,15 +15,18 @@ class TabContainer<T : Tab>(
     disabled: Val<Boolean> = falseVal(),
     private val ctrl: TabController<T>,
     private val createWidget: (CoroutineScope, T) -> Widget,
-) : Widget(scope, listOf(::style), hidden, disabled) {
+) : Widget(scope, hidden, disabled) {
     override fun Node.createElement() =
-        div(className = "pw-tab-container") {
+        div {
-            div(className = "pw-tab-container-bar") {
+            className = "pw-tab-container"
+
+            div {
+                className = "pw-tab-container-bar"
+
                 for (tab in ctrl.tabs) {
-                    span(
+                    span {
-                        className = "pw-tab-container-tab",
+                        className = "pw-tab-container-tab"
-                        title = tab.title,
+                        title = tab.title
-                    ) {
                         textContent = tab.title
 
                         observe(ctrl.activeTab) {
@@ -38,7 +41,9 @@ class TabContainer<T : Tab>(
                     }
                 }
             }
-            div(className = "pw-tab-container-panes") {
+            div {
+                className = "pw-tab-container-panes"
+
                 for (tab in ctrl.tabs) {
                     addChild(
                         LazyLoader(
@@ -57,26 +62,25 @@ class TabContainer<T : Tab>(
 
     companion object {
         private const val ACTIVE_CLASS = "pw-active"
-    }
-}
 
-@Suppress("CssUnresolvedCustomProperty", "CssUnusedSymbol")
+        init {
-// language=css
+            @Suppress("CssUnresolvedCustomProperty", "CssUnusedSymbol")
-private fun style() = """
+            // language=css
-.pw-tab-container {
+            style("""
+                .pw-tab-container {
                     display: flex;
                     flex-direction: column;
-}
+                }
 
-.pw-tab-container-bar {
+                .pw-tab-container-bar {
                     box-sizing: border-box;
                     height: 28px;
                     min-height: 28px; /* To avoid bar from getting squished when pane content gets larger than pane in Firefox. */
                     padding: 3px 3px 0 3px;
                     border-bottom: var(--pw-border);
-}
+                }
 
-.pw-tab-container-tab {
+                .pw-tab-container-tab {
                     box-sizing: border-box;
                     display: inline-flex;
                     align-items: center;
@@ -87,27 +91,30 @@ private fun style() = """
                     background-color: var(--pw-tab-bg-color);
                     color: var(--pw-tab-text-color);
                     font-size: 13px;
-}
+                }
 
-.pw-tab-container-tab:hover {
+                .pw-tab-container-tab:hover {
                     background-color: var(--pw-tab-bg-color-hover);
                     color: var(--pw-tab-text-color-hover);
-}
+                }
 
-.pw-tab-container-tab.pw-active {
+                .pw-tab-container-tab.pw-active {
                     background-color: var(--pw-tab-bg-color-active);
                     color: var(--pw-tab-text-color-active);
                     border-bottom-color: var(--pw-tab-bg-color-active);
-}
+                }
 
-.pw-tab-container-panes {
+                .pw-tab-container-panes {
                     flex-grow: 1;
                     display: flex;
                     flex-direction: row;
                     overflow: hidden;
-}
+                }
 
-.pw-tab-container-panes > * {
+                .pw-tab-container-panes > * {
                     flex-grow: 1;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

webui/src/main/kotlin/world/phantasmal/webui/widgets/TextInput.kt

@@ -0,0 +1,42 @@
+package world.phantasmal.webui.widgets
+
+import kotlinx.coroutines.CoroutineScope
+import org.w3c.dom.HTMLInputElement
+import world.phantasmal.observable.value.Val
+import world.phantasmal.observable.value.falseVal
+
+class TextInput(
+    scope: CoroutineScope,
+    hidden: Val<Boolean> = falseVal(),
+    disabled: Val<Boolean> = falseVal(),
+    label: String? = null,
+    labelVal: Val<String>? = null,
+    preferredLabelPosition: LabelPosition = LabelPosition.Before,
+    value: String? = null,
+    valueVal: Val<String>? = null,
+    setValue: ((String) -> Unit)? = null,
+    maxLength: Int? = null
+) : Input<String>(
+    scope,
+    hidden,
+    disabled,
+    label,
+    labelVal,
+    preferredLabelPosition,
+    className = "pw-text-input",
+    inputClassName = "pw-number-text-inner",
+    inputType = "text",
+    value,
+    valueVal,
+    setValue,
+    maxLength,
+    min = null,
+    max = null,
+    step = null
+) {
+    override fun getInputValue(input: HTMLInputElement): String = input.value
+
+    override fun setInputValue(input: HTMLInputElement, value: String) {
+        input.value = value
+    }
+}

webui/src/main/kotlin/world/phantasmal/webui/widgets/Toolbar.kt

@@ -11,15 +11,19 @@ class Toolbar(
     hidden: Val<Boolean> = falseVal(),
     disabled: Val<Boolean> = falseVal(),
     children: List<Widget>,
-) : Widget(scope, listOf(::style), hidden, disabled) {
+) : Widget(scope, hidden, disabled) {
     private val childWidgets = children
 
     override fun Node.createElement() =
-        div(className = "pw-toolbar") {
+        div {
+            className = "pw-toolbar"
+
             childWidgets.forEach { child ->
                 // Group labelled controls and their labels together.
                 if (child is LabelledControl && child.label != null) {
-                    div(className = "pw-toolbar-group") {
+                    div {
+                        className = "pw-toolbar-group"
+
                         when (child.preferredLabelPosition) {
                             LabelPosition.Before -> {
                                 addChild(child.label!!)
@@ -36,36 +40,40 @@ class Toolbar(
                 }
             }
         }
-}
 
-@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
+    companion object {
-// language=css
+        init {
-private fun style() = """
+            @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
-.pw-toolbar {
+            // language=css
+            style("""
+                .pw-toolbar {
                     box-sizing: border-box;
                     display: flex;
                     flex-direction: row;
                     align-items: center;
                     border-bottom: var(--pw-border);
                     padding: 0 2px;
-}
+                }
 
-.pw-toolbar > * {
+                .pw-toolbar > * {
                     margin: 2px 1px;
-}
+                }
 
-.pw-toolbar > .pw-toolbar-group {
+                .pw-toolbar > .pw-toolbar-group {
                     margin: 2px 3px;
                     display: flex;
                     flex-direction: row;
                     align-items: center;
-}
+                }
 
-.pw-toolbar > .pw-toolbar-group > * {
+                .pw-toolbar > .pw-toolbar-group > * {
                     margin: 0 2px;
-}
+                }
 
-.pw-toolbar .pw-input {
+                .pw-toolbar .pw-input {
                     height: 26px;
+                }
+            """.trimIndent())
+        }
+    }
 }
-"""

webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt

@@ -2,10 +2,10 @@ package world.phantasmal.webui.widgets
 
 import kotlinx.browser.document
 import kotlinx.coroutines.CoroutineScope
-import kotlinx.dom.appendText
 import kotlinx.dom.clear
 import org.w3c.dom.*
 import world.phantasmal.core.disposable.disposable
+import world.phantasmal.observable.Observable
 import world.phantasmal.observable.value.Val
 import world.phantasmal.observable.value.falseVal
 import world.phantasmal.observable.value.list.ListVal
@@ -16,7 +16,6 @@ import world.phantasmal.webui.DisposableContainer
 
 abstract class Widget(
     protected val scope: CoroutineScope,
-    private val styles: List<() -> String> = emptyList(),
     /**
      * By default determines the hidden attribute of its [element].
      */
@@ -33,13 +32,6 @@ abstract class Widget(
     private var resizeObserverInitialized = false
 
     private val elementDelegate = lazy {
-        // Add CSS declarations to stylesheet if this is the first time we're encountering them.
-        styles.forEach { style ->
-            if (STYLES_ADDED.add(style)) {
-                STYLE_EL.appendText(style())
-            }
-        }
-
         val el = document.createDocumentFragment().createElement()
 
         observe(hidden) { hidden ->
@@ -101,6 +93,23 @@ abstract class Widget(
         super.internalDispose()
     }
 
+    protected fun Node.text(observable: Observable<String>) {
+        observe(observable) { textContent = it }
+    }
+
+    protected fun HTMLElement.hidden(observable: Observable<Boolean>) {
+        observe(observable) { hidden = it }
+    }
+
+    /**
+     * Appends a widget's element to the receiving node.
+     */
+    protected fun <T : Widget> Node.addWidget(widget: T): T {
+        addDisposable(widget)
+        appendChild(widget.element)
+        return widget
+    }
+
     /**
      * Adds a child widget to [children] and appends its element to the receiving node.
      */
@@ -112,7 +121,7 @@ abstract class Widget(
         return child
     }
 
-    fun <T> Node.bindChildrenTo(
+    protected fun <T> Node.bindChildrenTo(
         list: ListVal<T>,
         createChild: (T, Int) -> Node,
     ) {
@@ -198,7 +207,10 @@ abstract class Widget(
             document.head!!.append(el)
             el
         }
-        private val STYLES_ADDED: MutableSet<() -> String> = mutableSetOf()
+
+        protected fun style(style: String) {
+            STYLE_EL.append(style)
+        }
 
         protected fun setAncestorHidden(widget: Widget, hidden: Boolean) {
             widget._ancestorHidden.value = hidden

webui/src/test/kotlin/world/phantasmal/webui/widgets/WidgetTests.kt

@@ -1,5 +1,6 @@
 package world.phantasmal.webui.widgets
 
+import kotlinx.coroutines.CoroutineScope
 import org.w3c.dom.Node
 import world.phantasmal.observable.value.Val
 import world.phantasmal.observable.value.falseVal
@@ -10,15 +11,16 @@ import world.phantasmal.webui.dom.div
 import kotlin.test.Test
 import kotlin.test.assertFalse
 import kotlin.test.assertTrue
+import kotlin.test.fail
 
 class WidgetTests : TestSuite() {
     @Test
-    fun ancestorHidden_and_selfOrAncestorHidden_should_update_when_hidden_changes() {
+    fun ancestorHidden_and_selfOrAncestorHidden_should_update_when_hidden_changes() = test {
         val parentHidden = mutableVal(false)
         val childHidden = mutableVal(false)
-        val grandChild = DummyWidget()
+        val grandChild = DummyWidget(scope)
-        val child = DummyWidget(childHidden, grandChild)
+        val child = DummyWidget(scope, childHidden, grandChild)
-        val parent = disposer.add(DummyWidget(parentHidden, child))
+        val parent = disposer.add(DummyWidget(scope, parentHidden, child))
 
         parent.element // Ensure widgets are fully initialized.
 
@@ -50,9 +52,10 @@ class WidgetTests : TestSuite() {
     }
 
     @Test
-    fun added_child_widgets_should_have_ancestorHidden_and_selfOrAncestorHidden_set_correctly() {
+    fun added_child_widgets_should_have_ancestorHidden_and_selfOrAncestorHidden_set_correctly() =
-        val parent = disposer.add(DummyWidget(hidden = trueVal()))
+        test {
-        val child = parent.addChild(DummyWidget())
+            val parent = disposer.add(DummyWidget(scope, hidden = trueVal()))
+            val child = parent.addChild(DummyWidget(scope))
 
             assertFalse(parent.ancestorHidden.value)
             assertTrue(parent.selfOrAncestorHidden.value)
@@ -61,6 +64,7 @@ class WidgetTests : TestSuite() {
         }
 
     private inner class DummyWidget(
+        scope: CoroutineScope,
         hidden: Val<Boolean> = falseVal(),
         private val child: Widget? = null,
     ) : Widget(scope, hidden = hidden) {