Quest editor layout is now persisted again. Added entity list widgets.

lib/src/commonMain/kotlin/world/phantasmal/lib/assembly/Disassembly.kt

@@ -13,9 +13,9 @@ private val INDENT = " ".repeat(INDENT_WIDTH)
  * @param inlineStackArgs If true, will output stack arguments inline instead of outputting stack
  * management instructions (argpush variants).
  */
-fun disassemble(byteCodeIr: List<Segment>, inlineStackArgs: Boolean = true): List<String> {
+fun disassemble(bytecodeIr: List<Segment>, inlineStackArgs: Boolean = true): List<String> {
     logger.trace {
-        "Disassembling ${byteCodeIr.size} segments with ${
+        "Disassembling ${bytecodeIr.size} segments with ${
             if (inlineStackArgs) "inline stack arguments" else "stack push instructions"
         }."
     }
@@ -24,7 +24,7 @@ fun disassemble(byteCodeIr: List<Segment>, inlineStackArgs: Boolean = true): Lis
     val stack = mutableListOf<ArgWithType>()
     var sectionType: SegmentType? = null
 
-    for (segment in byteCodeIr) {
+    for (segment in bytecodeIr) {
         // Section marker (.code, .data or .string).
         if (sectionType != segment.type) {
             sectionType = segment.type

lib/src/commonMain/kotlin/world/phantasmal/lib/fileFormats/quest/Bin.kt

@@ -17,7 +17,7 @@ class BinFile(
     val questName: String,
     val shortDescription: String,
     val longDescription: String,
-    val byteCode: Buffer,
+    val bytecode: Buffer,
     val labelOffsets: IntArray,
     val shopItems: UIntArray,
 )
@@ -40,18 +40,18 @@ enum class BinFormat {
 }
 
 fun parseBin(cursor: Cursor): BinFile {
-    val byteCodeOffset = cursor.int()
+    val bytecodeOffset = cursor.int()
     val labelOffsetTableOffset = cursor.int() // Relative offsets
     val size = cursor.int()
     cursor.seek(4) // Always seems to be 0xFFFFFFFF.
 
-    val format = when (byteCodeOffset) {
+    val format = when (bytecodeOffset) {
         DC_GC_OBJECT_CODE_OFFSET -> BinFormat.DC_GC
         PC_OBJECT_CODE_OFFSET -> BinFormat.PC
         BB_OBJECT_CODE_OFFSET -> BinFormat.BB
         else -> {
             logger.warn {
-                "Byte code at unexpected offset $byteCodeOffset, assuming file is a PC file."
+                "Byte code at unexpected offset $bytecodeOffset, assuming file is a PC file."
             }
             BinFormat.PC
         }
@@ -100,9 +100,9 @@ fun parseBin(cursor: Cursor): BinFile {
         .seekStart(labelOffsetTableOffset)
         .intArray(labelOffsetCount)
 
-    val byteCode = cursor
+    val bytecode = cursor
-        .seekStart(byteCodeOffset)
+        .seekStart(bytecodeOffset)
-        .buffer(labelOffsetTableOffset - byteCodeOffset)
+        .buffer(labelOffsetTableOffset - bytecodeOffset)
 
     return BinFile(
         format,
@@ -111,7 +111,7 @@ fun parseBin(cursor: Cursor): BinFile {
         questName,
         shortDescription,
         longDescription,
-        byteCode,
+        bytecode,
         labelOffsets,
         shopItems,
     )

lib/src/commonMain/kotlin/world/phantasmal/lib/fileFormats/quest/Bytecode.kt

@@ -43,14 +43,14 @@ val BUILTIN_FUNCTIONS = setOf(
     860,
 )
 
-fun parseByteCode(
+fun parseBytecode(
-    byteCode: Buffer,
+    bytecode: Buffer,
     labelOffsets: IntArray,
     entryLabels: Set<Int>,
     dcGcFormat: Boolean,
     lenient: Boolean,
 ): PwResult<List<Segment>> {
-    val cursor = BufferCursor(byteCode)
+    val cursor = BufferCursor(bytecode)
     val labelHolder = LabelHolder(labelOffsets)
     val result = PwResult.build<List<Segment>>(logger)
     val offsetToSegment = mutableMapOf<Int, Segment>()

lib/src/commonMain/kotlin/world/phantasmal/lib/fileFormats/quest/NpcType.kt

@@ -38,7 +38,6 @@ enum class NpcType(
      */
     val properties: List<EntityProp> = emptyList(),
 ) : EntityType {
-
     //
     // Unknown NPCs
     //
@@ -1478,4 +1477,11 @@ enum class NpcType(
      * The type of this NPC's rare variant if it has one.
      */
     val rareType: NpcType? by lazy { rareType?.invoke() }
+
+    companion object {
+        /**
+         * Use this instead of [values] to avoid unnecessary copying.
+         */
+        val VALUES: Array<NpcType> = values()
+    }
 }

lib/src/commonMain/kotlin/world/phantasmal/lib/fileFormats/quest/ObjectType.kt

@@ -1,5 +1,7 @@
 package world.phantasmal.lib.fileFormats.quest
 
+import world.phantasmal.lib.fileFormats.quest.NpcType.values
+
 enum class ObjectType(
     override val uniqueName: String,
     /**
@@ -2559,4 +2561,11 @@ enum class ObjectType(
     );
 
     override val simpleName = uniqueName
+
+    companion object {
+        /**
+         * Use this instead of [values] to avoid unnecessary copying.
+         */
+        val VALUES: Array<ObjectType> = ObjectType.values()
+    }
 }

lib/src/commonMain/kotlin/world/phantasmal/lib/fileFormats/quest/Quest.kt

@@ -26,7 +26,7 @@ class Quest(
     val npcs: List<QuestNpc>,
     val events: List<DatEvent>,
     val datUnknowns: List<DatUnknown>,
-    val byteCodeIr: List<Segment>,
+    val bytecodeIr: List<Segment>,
     val shopItems: UIntArray,
     val mapDesignations: Map<Int, Int>,
 )
@@ -64,26 +64,26 @@ fun parseBinDatToQuest(
     var episode = Episode.I
     var mapDesignations = emptyMap<Int, Int>()
 
-    val parseByteCodeResult = parseByteCode(
+    val parseBytecodeResult = parseBytecode(
-        bin.byteCode,
+        bin.bytecode,
         bin.labelOffsets,
         extractScriptEntryPoints(objects, npcs),
         bin.format == BinFormat.DC_GC,
         lenient,
     )
 
-    result.addResult(parseByteCodeResult)
+    result.addResult(parseBytecodeResult)
 
-    if (parseByteCodeResult !is Success) {
+    if (parseBytecodeResult !is Success) {
         return result.failure()
     }
 
-    val byteCodeIr = parseByteCodeResult.value
+    val bytecodeIr = parseBytecodeResult.value
 
-    if (byteCodeIr.isEmpty()) {
+    if (bytecodeIr.isEmpty()) {
         result.addProblem(Severity.Warning, "File contains no instruction labels.")
     } else {
-        val instructionSegments = byteCodeIr.filterIsInstance<InstructionSegment>()
+        val instructionSegments = bytecodeIr.filterIsInstance<InstructionSegment>()
 
         var label0Segment: InstructionSegment? = null
 
@@ -118,7 +118,7 @@ fun parseBinDatToQuest(
         npcs,
         events = dat.events,
         datUnknowns = dat.unknowns,
-        byteCodeIr,
+        bytecodeIr,
         shopItems = bin.shopItems,
         mapDesignations,
     ))

lib/src/commonTest/kotlin/world/phantasmal/lib/fileFormats/quest/BytecodeTests.kt

@@ -10,7 +10,7 @@ import kotlin.test.Test
 import kotlin.test.assertEquals
 import kotlin.test.assertTrue
 
-class ByteCodeTests : LibTestSuite() {
+class BytecodeTests : LibTestSuite() {
     @Test
     fun minimal() {
         val buffer = Buffer.fromByteArray(ubyteArrayOf(
@@ -19,7 +19,7 @@ class ByteCodeTests : LibTestSuite() {
             0x01u                                            // ret
         ).toByteArray())
 
-        val result = parseByteCode(
+        val result = parseBytecode(
             buffer,
             labelOffsets = intArrayOf(0),
             entryLabels = setOf(0),

lib/src/commonTest/kotlin/world/phantasmal/lib/fileFormats/quest/QuestTests.kt

@@ -42,7 +42,7 @@ class QuestTests : LibTestSuite() {
         assertEquals(4, quest.mapDesignations[10])
         assertEquals(0, quest.mapDesignations[14])
 
-        val seg1 = quest.byteCodeIr[0]
+        val seg1 = quest.bytecodeIr[0]
         assertTrue(seg1 is InstructionSegment)
         assertTrue(0 in seg1.labels)
         assertEquals(OP_SET_EPISODE, seg1.instructions[0].opcode)
@@ -53,15 +53,15 @@ class QuestTests : LibTestSuite() {
         assertEquals(150, seg1.instructions[2].args[0].value)
         assertEquals(OP_SET_FLOOR_HANDLER, seg1.instructions[3].opcode)
 
-        val seg2 = quest.byteCodeIr[1]
+        val seg2 = quest.bytecodeIr[1]
         assertTrue(seg2 is InstructionSegment)
         assertTrue(1 in seg2.labels)
 
-        val seg3 = quest.byteCodeIr[2]
+        val seg3 = quest.bytecodeIr[2]
         assertTrue(seg3 is InstructionSegment)
         assertTrue(10 in seg3.labels)
 
-        val seg4 = quest.byteCodeIr[3]
+        val seg4 = quest.bytecodeIr[3]
         assertTrue(seg4 is InstructionSegment)
         assertTrue(150 in seg4.labels)
         assertEquals(1, seg4.instructions.size)

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

@@ -26,22 +26,6 @@ interface Val<out T> : Observable<T> {
     fun <R> map(transform: (T) -> R): Val<R> =
         MappedVal(listOf(this)) { transform(value) }
 
-    /**
-     * Map a transformation function over this val and another val.
-     *
-     * @param transform called whenever this val or [v2] changes
-     */
-    fun <T2, R> map(v2: Val<T2>, transform: (T, T2) -> R): Val<R> =
-        MappedVal(listOf(this, v2)) { transform(value, v2.value) }
-
-    /**
-     * Map a transformation function over this val and two other vals.
-     *
-     * @param transform called whenever this val, [v2] or [v3] changes
-     */
-    fun <T2, T3, R> map(v2: Val<T2>, v3: Val<T3>, transform: (T, T2, T3) -> R): Val<R> =
-        MappedVal(listOf(this, v2, v3)) { transform(value, v2.value, v3.value) }
-
     /**
      * Map a transformation function that returns a val over this val. The resulting val will change
      * when this val changes and when the val returned by [transform] changes.

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

@@ -26,3 +26,28 @@ fun <T> mutableVal(value: T): MutableVal<T> = SimpleVal(value)
  */
 fun <T> mutableVal(getter: () -> T, setter: (T) -> Unit): MutableVal<T> =
     DelegatingVal(getter, setter)
+
+/**
+ * Map a transformation function over 2 vals.
+ *
+ * @param transform called whenever [v1] or [v2] changes
+ */
+fun <T1, T2, R> map(
+    v1: Val<T1>,
+    v2: Val<T2>,
+    transform: (T1, T2) -> R,
+): Val<R> =
+    MappedVal(listOf(v1, v2)) { transform(v1.value, v2.value) }
+
+/**
+ * Map a transformation function over 3 vals.
+ *
+ * @param transform called whenever [v1], [v2] or [v3] changes
+ */
+fun <T1, T2, T3, R> map(
+    v1: Val<T1>,
+    v2: Val<T2>,
+    v3: Val<T3>,
+    transform: (T1, T2, T3) -> R,
+): Val<R> =
+    MappedVal(listOf(v1, v2, v3)) { transform(v1.value, v2.value, v3.value) }

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

@@ -4,13 +4,13 @@ infix fun <T> Val<T>.eq(value: T): Val<Boolean> =
     map { it == value }
 
 infix fun <T> Val<T>.eq(value: Val<T>): Val<Boolean> =
-    map(value) { a, b -> a == b }
+    map(this, value) { a, b -> a == b }
 
 infix fun <T> Val<T>.ne(value: T): Val<Boolean> =
     map { it != value }
 
 infix fun <T> Val<T>.ne(value: Val<T>): Val<Boolean> =
-    map(value) { a, b -> a != b }
+    map(this, value) { a, b -> a != b }
 
 fun <T> Val<T?>.orElse(defaultValue: () -> T): Val<T> =
     map { it ?: defaultValue() }
@@ -19,23 +19,23 @@ infix fun <T : Comparable<T>> Val<T>.gt(value: T): Val<Boolean> =
     map { it > value }
 
 infix fun <T : Comparable<T>> Val<T>.gt(value: Val<T>): Val<Boolean> =
-    map(value) { a, b -> a > b }
+    map(this, value) { a, b -> a > b }
 
 infix fun <T : Comparable<T>> Val<T>.lt(value: T): Val<Boolean> =
     map { it < value }
 
 infix fun <T : Comparable<T>> Val<T>.lt(value: Val<T>): Val<Boolean> =
-    map(value) { a, b -> a < b }
+    map(this, value) { a, b -> a < b }
 
 infix fun Val<Boolean>.and(other: Val<Boolean>): Val<Boolean> =
-    map(other) { a, b -> a && b }
+    map(this, other) { a, b -> a && b }
 
 infix fun Val<Boolean>.or(other: Val<Boolean>): Val<Boolean> =
-    map(other) { a, b -> a || b }
+    map(this, other) { a, b -> a || b }
 
 // Use != because of https://youtrack.jetbrains.com/issue/KT-31277.
 infix fun Val<Boolean>.xor(other: Val<Boolean>): Val<Boolean> =
-    map(other) { a, b -> a != b }
+    map(this, other) { a, b -> a != b }
 
 operator fun Val<Boolean>.not(): Val<Boolean> = map { !it }
 

web/src/main/kotlin/world/phantasmal/web/core/controllers/DockController.kt

@@ -0,0 +1,39 @@
+package world.phantasmal.web.core.controllers
+
+import world.phantasmal.webui.controllers.Controller
+
+sealed class DockedItem {
+    abstract val flex: Double?
+}
+
+sealed class DockedContainer : DockedItem() {
+    abstract val items: List<DockedItem>
+}
+
+class DockedRow(
+    override val flex: Double? = null,
+    override val items: List<DockedItem> = emptyList(),
+) : DockedContainer()
+
+class DockedColumn(
+    override val flex: Double? = null,
+    override val items: List<DockedItem> = emptyList(),
+) : DockedContainer()
+
+class DockedStack(
+    val activeItemIndex: Int? = null,
+    override val flex: Double? = null,
+    override val items: List<DockedItem> = emptyList(),
+) : DockedContainer()
+
+class DockedWidget(
+    val id: String,
+    val title: String,
+    override val flex: Double? = null,
+) : DockedItem()
+
+abstract class DockController : Controller() {
+    abstract suspend fun initialConfig(): DockedItem
+
+    abstract suspend fun configChanged(config: DockedItem)
+}

web/src/main/kotlin/world/phantasmal/web/core/persistence/Persister.kt

@@ -0,0 +1,58 @@
+package world.phantasmal.web.core.persistence
+
+import kotlinx.browser.localStorage
+import kotlinx.serialization.KSerializer
+import kotlinx.serialization.json.Json
+import kotlinx.serialization.serializer
+import mu.KotlinLogging
+import world.phantasmal.web.core.models.Server
+
+private val logger = KotlinLogging.logger {}
+
+abstract class Persister {
+    private val format = Json {
+        classDiscriminator = "#type"
+        ignoreUnknownKeys = true
+    }
+
+    protected suspend inline fun <reified T> persist(key: String, data: T) {
+        persist(key, data, serializer())
+    }
+
+    protected suspend fun <T> persist(key: String, data: T, serializer: KSerializer<T>) {
+        try {
+            localStorage.setItem(key, format.encodeToString(serializer, data))
+        } catch (e: Throwable) {
+            logger.error(e) { "Couldn't persist ${key}." }
+        }
+    }
+
+    protected suspend fun persistForServer(server: Server, key: String, data: Any) {
+        persist(serverKey(server, key), data)
+    }
+
+    protected suspend inline fun <reified T> load(key: String): T? =
+        load(key, serializer())
+
+    protected suspend fun <T> load(key: String, serializer: KSerializer<T>): T? =
+        try {
+            val json = localStorage.getItem(key)
+            json?.let { format.decodeFromString(serializer, it) }
+        } catch (e: Throwable) {
+            logger.error(e) { "Couldn't load ${key}." }
+            null
+        }
+
+    protected suspend inline fun <reified T> loadForServer(server: Server, key: String): T? =
+        load(serverKey(server, key))
+
+    fun serverKey(server: Server, key: String): String {
+        // Do this manually per server type instead of just appending e.g. `server` to ensure the
+        // persisted key never changes.
+        val serverKey = when (server) {
+            Server.Ephinea -> "Ephinea"
+        }
+
+        return "$key.$serverKey"
+    }
+}

web/src/main/kotlin/world/phantasmal/web/core/undo/UndoStack.kt

@@ -3,6 +3,7 @@ package world.phantasmal.web.core.undo
 import world.phantasmal.observable.value.Val
 import world.phantasmal.observable.value.gt
 import world.phantasmal.observable.value.list.mutableListVal
+import world.phantasmal.observable.value.map
 import world.phantasmal.observable.value.mutableVal
 import world.phantasmal.web.core.actions.Action
 
@@ -21,7 +22,7 @@ class UndoStack(private val manager: UndoManager) : Undo {
 
     override val canUndo: Val<Boolean> = index gt 0
 
-    override val canRedo: Val<Boolean> = stack.map(index) { stack, index -> index < stack.size }
+    override val canRedo: Val<Boolean> = map(stack, index) { stack, index -> index < stack.size }
 
     override val firstUndo: Val<Action?> = index.map { stack.value.getOrNull(it - 1) }
 

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

@@ -1,53 +1,23 @@
 package world.phantasmal.web.core.widgets
 
 import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.launch
 import org.w3c.dom.Node
 import world.phantasmal.observable.value.Val
 import world.phantasmal.observable.value.trueVal
+import world.phantasmal.web.core.controllers.*
 import world.phantasmal.web.externals.goldenLayout.GoldenLayout
 import world.phantasmal.webui.dom.div
 import world.phantasmal.webui.obj
 import world.phantasmal.webui.widgets.Widget
 
-private const val HEADER_HEIGHT = 24
-private const val DEFAULT_HEADER_HEIGHT = 20
-
-/**
- * This value is used to work around a bug in GoldenLayout related to headerHeight.
- */
-private const val HEADER_HEIGHT_DIFF = HEADER_HEIGHT - DEFAULT_HEADER_HEIGHT
-
-sealed class DockedItem(val flex: Int?)
-sealed class DockedContainer(flex: Int?, val items: List<DockedItem>) : DockedItem(flex)
-
-class DockedRow(
-    flex: Int? = null,
-    items: List<DockedItem> = emptyList(),
-) : DockedContainer(flex, items)
-
-class DockedColumn(
-    flex: Int? = null,
-    items: List<DockedItem> = emptyList(),
-) : DockedContainer(flex, items)
-
-class DockedStack(
-    flex: Int? = null,
-    items: List<DockedItem> = emptyList(),
-) : DockedContainer(flex, items)
-
-class DockedWidget(
-    val id: String,
-    val title: String,
-    flex: Int? = null,
-    val createWidget: (CoroutineScope) -> Widget,
-) : DockedItem(flex)
-
 class DockWidget(
     scope: CoroutineScope,
     visible: Val<Boolean> = trueVal(),
-    private val item: DockedItem,
+    private val ctrl: DockController,
+    private val createWidget: (scope: CoroutineScope, id: String) -> Widget?,
 ) : Widget(scope, visible) {
-    private lateinit var goldenLayout: GoldenLayout
+    private var goldenLayout: GoldenLayout? = null
 
     init {
         js("""require("golden-layout/src/css/goldenlayout-base.css");""")
@@ -57,9 +27,78 @@ class DockWidget(
         div {
             className = "pw-core-dock"
 
-            val idToCreate = mutableMapOf<String, (CoroutineScope) -> Widget>()
+            val outerElement = this
 
-            val config = obj<GoldenLayout.Config> {
+            scope.launch {
+                val dockedWidgetIds = mutableSetOf<String>()
+
+                val config = createConfig(ctrl.initialConfig(), dockedWidgetIds)
+
+                if (disposed) return@launch
+
+                if (outerElement.offsetWidth == 0 || outerElement.offsetHeight == 0) {
+                    // Temporarily set width and height so GoldenLayout initializes correctly.
+                    style.width = "1000px"
+                    style.height = "700px"
+                }
+
+                val goldenLayout = GoldenLayout(config, outerElement)
+                this@DockWidget.goldenLayout = goldenLayout
+
+                dockedWidgetIds.forEach { id ->
+                    goldenLayout.registerComponent(id) { container: GoldenLayout.Container ->
+                        val node = container.getElement()[0] as Node
+
+                        createWidget(scope, id)?.let { widget ->
+                            node.addChild(widget)
+                            widget.focus()
+                        }
+                    }
+                }
+
+                goldenLayout.on<Any>("stateChanged", {
+                    val content = goldenLayout.toConfig().content
+
+                    if (content is Array<*> && content.length > 0) {
+                        fromGoldenLayoutConfig(
+                            content.unsafeCast<Array<GoldenLayout.ItemConfig>>().first(),
+                            useWidthAsFlex = null,
+                        )?.let {
+                            scope.launch { ctrl.configChanged(it) }
+                        }
+                    }
+                })
+
+                goldenLayout.init()
+
+                style.width = ""
+                style.height = ""
+
+                addDisposable(size.observe { (size) ->
+                    goldenLayout.updateSize(size.width, size.height)
+                })
+            }
+        }
+
+    override fun internalDispose() {
+        goldenLayout?.destroy()
+        super.internalDispose()
+    }
+
+    companion object {
+        private const val HEADER_HEIGHT = 24
+        private const val DEFAULT_HEADER_HEIGHT = 20
+
+        /**
+         * This value is used to work around a bug in GoldenLayout related to headerHeight.
+         */
+        private const val HEADER_HEIGHT_DIFF = HEADER_HEIGHT - DEFAULT_HEADER_HEIGHT
+
+        private fun createConfig(
+            item: DockedItem,
+            dockedWidgetIds: MutableSet<String>,
+        ): GoldenLayout.Config =
+            obj {
                 settings = obj<GoldenLayout.Settings> {
                     showPopoutIcon = false
                     showMaximiseIcon = false
@@ -69,82 +108,108 @@ class DockWidget(
                     headerHeight = HEADER_HEIGHT
                 }
                 content = arrayOf(
-                    toConfigContent(item, idToCreate)
+                    toGoldenLayoutConfig(item, dockedWidgetIds)
                 )
             }
 
-            // Temporarily set width and height so GoldenLayout initializes correctly.
+        private fun toGoldenLayoutConfig(
-            style.width = "1000px"
+            item: DockedItem,
-            style.height = "700px"
+            dockedWidgetIds: MutableSet<String>,
-
+        ): GoldenLayout.ItemConfig {
-            goldenLayout = GoldenLayout(config, this)
+            val itemType = when (item) {
-
+                is DockedRow -> "row"
-            idToCreate.forEach { (id, create) ->
+                is DockedColumn -> "column"
-                goldenLayout.registerComponent(id) { container: GoldenLayout.Container ->
+                is DockedStack -> "stack"
-                    val node = container.getElement()[0] as Node
+                is DockedWidget -> "component"
-                    val widget = create(scope)
-                    node.addChild(widget)
-                    widget.focus()
-                }
             }
 
-            goldenLayout.init()
+            return when (item) {
+                is DockedWidget -> {
+                    dockedWidgetIds.add(item.id)
 
-            style.width = ""
+                    obj<GoldenLayout.ComponentConfig> {
-            style.height = ""
+                        title = item.title
+                        type = "component"
+                        componentName = item.id
+                        isClosable = false
 
-            addDisposable(size.observe { (size) ->
+                        if (item.flex != null) {
-                goldenLayout.updateSize(size.width, size.height)
+                            width = item.flex
-            })
+                            height = item.flex
-        }
+                        }
-
-    override fun internalDispose() {
-        goldenLayout.destroy()
-        super.internalDispose()
-    }
-
-    private fun toConfigContent(
-        item: DockedItem,
-        idToCreate: MutableMap<String, (CoroutineScope) -> Widget>,
-    ): GoldenLayout.ItemConfig {
-        val itemType = when (item) {
-            is DockedRow -> "row"
-            is DockedColumn -> "column"
-            is DockedStack -> "stack"
-            is DockedWidget -> "component"
-        }
-
-        return when (item) {
-            is DockedWidget -> {
-                idToCreate[item.id] = item.createWidget
-
-                obj<GoldenLayout.ComponentConfig> {
-                    title = item.title
-                    type = "component"
-                    componentName = item.id
-                    isClosable = false
-
-                    if (item.flex != null) {
-                        width = item.flex
-                        height = item.flex
                     }
                 }
+
+                is DockedContainer ->
+                    obj {
+                        type = itemType
+                        content = Array(item.items.size) {
+                            toGoldenLayoutConfig(item.items[it], dockedWidgetIds)
+                        }
+
+                        if (item.flex != null) {
+                            width = item.flex
+                            height = item.flex
+                        }
+
+                        if (item is DockedStack) {
+                            activeItemIndex = item.activeItemIndex
+                        }
+                    }
+            }
+        }
+
+        private fun fromGoldenLayoutConfig(
+            item: GoldenLayout.ItemConfig,
+            useWidthAsFlex: Boolean?,
+        ): DockedItem? {
+            val flex = when (useWidthAsFlex) {
+                true -> item.width
+                false -> item.height
+                null -> null
             }
 
-            is DockedContainer ->
+            return when (item.type) {
-                obj {
+                "row" -> DockedRow(
-                    type = itemType
+                    flex,
-                    content = Array(item.items.size) { toConfigContent(item.items[it], idToCreate) }
+                    items = item.content
+                        ?.mapNotNull { fromGoldenLayoutConfig(it, useWidthAsFlex = true) }
+                        ?: emptyList()
+                )
 
-                    if (item.flex != null) {
+                "column" -> DockedColumn(
-                        width = item.flex
+                    flex,
-                        height = item.flex
+                    items = item.content
+                        ?.mapNotNull { fromGoldenLayoutConfig(it, useWidthAsFlex = false) }
+                        ?: emptyList()
+                )
+
+                "stack" -> {
+                    DockedStack(
+                        item.activeItemIndex,
+                        flex,
+                        items = item.content
+                            ?.mapNotNull { fromGoldenLayoutConfig(it, useWidthAsFlex = null) }
+                            ?: emptyList()
+                    )
+                }
+
+                "component" -> {
+                    val id =
+                        (item.unsafeCast<GoldenLayout.ComponentConfig>()).componentName as String?
+                    val title = item.title
+
+                    if (id == null || title == null) {
+                        null
+                    } else {
+                        DockedWidget(id, title, flex)
                     }
                 }
-        }
-    }
 
-    companion object {
+                else -> null
+            }
+        }
+
         init {
             // Use #pw-root for higher specificity than the default GoldenLayout CSS.
             @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")

web/src/main/kotlin/world/phantasmal/web/externals/goldenLayout/goldenLayout.kt

@@ -6,11 +6,13 @@ import org.w3c.dom.Element
 
 @JsModule("golden-layout")
 @JsNonModule
-open external class GoldenLayout(configuration: Config, container: Element = definedExternally) {
+external class GoldenLayout(configuration: Config, container: Element = definedExternally) {
-    open fun init()
+    fun init()
-    open fun updateSize(width: Double, height: Double)
+    fun updateSize(width: Double, height: Double)
-    open fun registerComponent(name: String, component: Any)
+    fun registerComponent(name: String, component: Any)
-    open fun destroy()
+    fun destroy()
+    fun <E> on(eventName: String, callback: (E) -> Unit, context: Any = definedExternally)
+    fun toConfig(): dynamic
 
     interface Settings {
         var hasHeaders: Boolean?
@@ -44,11 +46,12 @@ open external class GoldenLayout(configuration: Config, container: Element = def
     interface ItemConfig {
         var type: String
         var content: Array<ItemConfig>?
-        var width: Number?
+        var width: Double?
-        var height: Number?
+        var height: Double?
-        var id: dynamic /* String? | Array<String>? */
+        var id: String? /* String? | Array<String>? */
         var isClosable: Boolean?
         var title: String?
+        var activeItemIndex: Int?
     }
 
     interface ComponentConfig : ItemConfig {

web/src/main/kotlin/world/phantasmal/web/externals/three/three.kt

@@ -179,7 +179,7 @@ external interface Renderer {
 
     fun render(scene: Object3D, camera: Camera)
 
-    fun setSize(width: Double, height: Double, updateStyle: Boolean = definedExternally)
+    fun setSize(width: Double, height: Double)
 }
 
 external interface WebGLRendererParameters {
@@ -197,7 +197,7 @@ external class WebGLRenderer(parameters: WebGLRendererParameters = definedExtern
 
     override fun render(scene: Object3D, camera: Camera)
 
-    override fun setSize(width: Double, height: Double, updateStyle: Boolean)
+    override fun setSize(width: Double, height: Double)
 
     fun setPixelRatio(value: Double)
 

web/src/main/kotlin/world/phantasmal/web/questEditor/QuestEditor.kt

@@ -11,6 +11,7 @@ import world.phantasmal.web.questEditor.controllers.*
 import world.phantasmal.web.questEditor.loading.AreaAssetLoader
 import world.phantasmal.web.questEditor.loading.EntityAssetLoader
 import world.phantasmal.web.questEditor.loading.QuestLoader
+import world.phantasmal.web.questEditor.persistence.QuestEditorUiPersister
 import world.phantasmal.web.questEditor.rendering.QuestRenderer
 import world.phantasmal.web.questEditor.stores.AreaStore
 import world.phantasmal.web.questEditor.stores.AssemblyEditorStore
@@ -32,12 +33,16 @@ class QuestEditor(
         val areaAssetLoader = addDisposable(AreaAssetLoader(scope, assetLoader))
         val entityAssetLoader = addDisposable(EntityAssetLoader(scope, assetLoader))
 
+        // Persistence
+        val questEditorUiPersister = QuestEditorUiPersister()
+
         // Stores
         val areaStore = addDisposable(AreaStore(scope, areaAssetLoader))
         val questEditorStore = addDisposable(QuestEditorStore(scope, uiStore, areaStore))
         val assemblyEditorStore = addDisposable(AssemblyEditorStore(scope, questEditorStore))
 
         // Controllers
+        val questEditorController = addDisposable(QuestEditorController(questEditorUiPersister))
         val toolbarController = addDisposable(QuestEditorToolbarController(
             questLoader,
             areaStore,
@@ -47,6 +52,9 @@ class QuestEditor(
         val npcCountsController = addDisposable(NpcCountsController(questEditorStore))
         val entityInfoController = addDisposable(EntityInfoController(questEditorStore))
         val assemblyEditorController = addDisposable(AssemblyEditorController(assemblyEditorStore))
+        val npcListController = addDisposable(EntityListController(questEditorStore, npcs = true))
+        val objectListController =
+            addDisposable(EntityListController(questEditorStore, npcs = false))
 
         // Rendering
         val renderer = addDisposable(QuestRenderer(
@@ -60,12 +68,15 @@ class QuestEditor(
         // Main Widget
         return QuestEditorWidget(
             scope,
+            questEditorController,
             { s -> QuestEditorToolbarWidget(s, toolbarController) },
             { s -> QuestInfoWidget(s, questInfoController) },
             { s -> NpcCountsWidget(s, npcCountsController) },
             { s -> EntityInfoWidget(s, entityInfoController) },
             { s -> QuestEditorRendererWidget(s, renderer) },
             { s -> AssemblyEditorWidget(s, assemblyEditorController) },
+            { s -> EntityListWidget(s, npcListController) },
+            { s -> EntityListWidget(s, objectListController) },
         )
     }
 }

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

@@ -0,0 +1,39 @@
+package world.phantasmal.web.questEditor.controllers
+
+import world.phantasmal.lib.fileFormats.quest.EntityType
+import world.phantasmal.lib.fileFormats.quest.Episode
+import world.phantasmal.lib.fileFormats.quest.NpcType
+import world.phantasmal.lib.fileFormats.quest.ObjectType
+import world.phantasmal.observable.value.Val
+import world.phantasmal.observable.value.map
+import world.phantasmal.web.questEditor.stores.QuestEditorStore
+import world.phantasmal.webui.controllers.Controller
+
+class EntityListController(store: QuestEditorStore, private val npcs: Boolean) : Controller() {
+    @Suppress("UNCHECKED_CAST")
+    private val entityTypes = (if (npcs) NpcType.VALUES else ObjectType.VALUES) as Array<EntityType>
+
+    val enabled: Val<Boolean> = store.questEditingEnabled
+
+    val entities: Val<List<EntityType>> =
+        map(store.currentQuest, store.currentArea) { quest, area ->
+            val episode = quest?.episode ?: Episode.I
+            val areaId = area?.id ?: 0
+
+            entityTypes.filter { entityType ->
+                filter(entityType, episode, areaId)
+            }
+        }
+
+    private fun filter(entityType: EntityType, episode: Episode, areaId: Int): Boolean =
+        if (npcs) {
+            entityType as NpcType
+
+            (entityType.episode == null || entityType.episode == episode) &&
+                    areaId in entityType.areaIds
+        } else {
+            entityType as ObjectType
+
+            entityType.areaIds[episode]?.contains(areaId) == true
+        }
+}

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

@@ -0,0 +1,94 @@
+package world.phantasmal.web.questEditor.controllers
+
+import world.phantasmal.web.core.controllers.*
+import world.phantasmal.web.questEditor.persistence.QuestEditorUiPersister
+
+class QuestEditorController(
+    private val questEditorUiPersister: QuestEditorUiPersister,
+) : DockController() {
+    override suspend fun initialConfig(): DockedItem =
+        questEditorUiPersister.loadLayoutConfig(ALL_WIDGET_IDS) ?: DEFAULT_CONFIG
+
+    override suspend fun configChanged(config: DockedItem) {
+        questEditorUiPersister.persistLayoutConfig(config)
+    }
+
+    companion object {
+        // These IDs are persisted, don't change them.
+        const val QUEST_INFO_WIDGET_ID = "info"
+        const val NPC_COUNTS_WIDGET_ID = "npc_counts"
+        const val ENTITY_INFO_WIDGET_ID = "entity_info"
+        const val QUEST_RENDERER_WIDGET_ID = "quest_renderer"
+        const val ASSEMBLY_EDITOR_WIDGET_ID = "asm_editor"
+        const val NPC_LIST_WIDGET_ID = "npc_list_view"
+        const val OBJECT_LIST_WIDGET_ID = "object_list_view"
+        const val EVENTS_WIDGET_ID = "events_view"
+
+        private val ALL_WIDGET_IDS: Set<String> = setOf(
+            "info",
+            "npc_counts",
+            "entity_info",
+            "quest_renderer",
+            "asm_editor",
+            "npc_list_view",
+            "object_list_view",
+            "events_view",
+        )
+
+        private val DEFAULT_CONFIG = DockedRow(
+            items = listOf(
+                DockedColumn(
+                    flex = 2.0,
+                    items = listOf(
+                        DockedStack(
+                            items = listOf(
+                                DockedWidget(
+                                    title = "Info",
+                                    id = QUEST_INFO_WIDGET_ID,
+                                ),
+                                DockedWidget(
+                                    title = "NPC Counts",
+                                    id = NPC_COUNTS_WIDGET_ID,
+                                ),
+                            )
+                        ),
+                        DockedWidget(
+                            title = "Entity",
+                            id = ENTITY_INFO_WIDGET_ID,
+                        ),
+                    )
+                ),
+                DockedStack(
+                    flex = 9.0,
+                    items = listOf(
+                        DockedWidget(
+                            title = "3D View",
+                            id = QUEST_RENDERER_WIDGET_ID,
+                        ),
+                        DockedWidget(
+                            title = "Script",
+                            id = ASSEMBLY_EDITOR_WIDGET_ID,
+                        ),
+                    )
+                ),
+                DockedStack(
+                    flex = 2.0,
+                    items = listOf(
+                        DockedWidget(
+                            title = "NPCs",
+                            id = NPC_LIST_WIDGET_ID,
+                        ),
+                        DockedWidget(
+                            title = "Objects",
+                            id = OBJECT_LIST_WIDGET_ID,
+                        ),
+                        DockedWidget(
+                            title = "Events",
+                            id = EVENTS_WIDGET_ID,
+                        ),
+                    )
+                ),
+            )
+        )
+    }
+}

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

@@ -9,8 +9,10 @@ import world.phantasmal.lib.fileFormats.quest.Episode
 import world.phantasmal.lib.fileFormats.quest.Quest
 import world.phantasmal.lib.fileFormats.quest.parseBinDatToQuest
 import world.phantasmal.lib.fileFormats.quest.parseQstToQuest
-import world.phantasmal.observable.value.*
+import world.phantasmal.observable.value.Val
-import world.phantasmal.web.core.undo.UndoManager
+import world.phantasmal.observable.value.map
+import world.phantasmal.observable.value.mutableVal
+import world.phantasmal.observable.value.value
 import world.phantasmal.web.questEditor.loading.QuestLoader
 import world.phantasmal.web.questEditor.models.AreaModel
 import world.phantasmal.web.questEditor.stores.AreaStore
@@ -67,7 +69,7 @@ class QuestEditorToolbarController(
         } ?: value(emptyList())
     }
 
-    val currentArea: Val<AreaAndLabel?> = areas.map(questEditorStore.currentArea) { areas, area ->
+    val currentArea: Val<AreaAndLabel?> = map(areas, questEditorStore.currentArea) { areas, area ->
         areas.find { it.area == area }
     }
 

web/src/main/kotlin/world/phantasmal/web/questEditor/dto/DockedItemDto.kt

@@ -0,0 +1,44 @@
+package world.phantasmal.web.questEditor.dto
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+sealed class DockedItemDto {
+    abstract val flex: Double?
+}
+
+@Serializable
+sealed class DockedContainerDto : DockedItemDto() {
+    abstract val items: List<DockedItemDto>
+}
+
+@Serializable
+@SerialName("row")
+class DockedRowDto(
+    override val flex: Double?,
+    override val items: List<DockedItemDto>,
+) : DockedContainerDto()
+
+@Serializable
+@SerialName("column")
+class DockedColumnDto(
+    override val flex: Double?,
+    override val items: List<DockedItemDto>,
+) : DockedContainerDto()
+
+@Serializable
+@SerialName("stack")
+class DockedStackDto(
+    val activeItemIndex: Int?,
+    override val flex: Double?,
+    override val items: List<DockedItemDto>,
+) : DockedContainerDto()
+
+@Serializable
+@SerialName("widget")
+class DockedWidgetDto(
+    val id: String,
+    val title: String,
+    override val flex: Double?,
+) : DockedItemDto()

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

@@ -5,6 +5,7 @@ import world.phantasmal.lib.fileFormats.quest.Episode
 import world.phantasmal.observable.value.Val
 import world.phantasmal.observable.value.list.ListVal
 import world.phantasmal.observable.value.list.mutableListVal
+import world.phantasmal.observable.value.map
 import world.phantasmal.observable.value.mutableVal
 
 class QuestModel(
@@ -17,7 +18,7 @@ class QuestModel(
     mapDesignations: Map<Int, Int>,
     npcs: MutableList<QuestNpcModel>,
     objects: MutableList<QuestObjectModel>,
-    val byteCodeIr: List<Segment>,
+    val bytecodeIr: List<Segment>,
     getVariant: (Episode, areaId: Int, variantId: Int) -> AreaVariantModel?,
 ) {
     private val _id = mutableVal(0)
@@ -56,7 +57,7 @@ class QuestModel(
         setShortDescription(shortDescription)
         setLongDescription(longDescription)
 
-        entitiesPerArea = this.npcs.map(this.objects) { ns, os ->
+        entitiesPerArea = map(this.npcs, this.objects) { ns, os ->
             val map = mutableMapOf<Int, Int>()
 
             for (npc in ns) {
@@ -70,24 +71,23 @@ class QuestModel(
             map
         }
 
-        areaVariants =
+        areaVariants = map(entitiesPerArea, this.mapDesignations) { entitiesPerArea, mds ->
-            entitiesPerArea.map(this.mapDesignations) { entitiesPerArea, mds ->
+            val variants = mutableMapOf<Int, AreaVariantModel>()
-                val variants = mutableMapOf<Int, AreaVariantModel>()
 
-                for (areaId in entitiesPerArea.values) {
+            for (areaId in entitiesPerArea.values) {
-                    getVariant(episode, areaId, 0)?.let {
+                getVariant(episode, areaId, 0)?.let {
-                        variants[areaId] = it
+                    variants[areaId] = it
-                    }
                 }
-
-                for ((areaId, variantId) in mds) {
-                    getVariant(episode, areaId, variantId)?.let {
-                        variants[areaId] = it
-                    }
-                }
-
-                variants.values.toList()
             }
+
+            for ((areaId, variantId) in mds) {
+                getVariant(episode, areaId, variantId)?.let {
+                    variants[areaId] = it
+                }
+            }
+
+            variants.values.toList()
+        }
     }
 
     fun setId(id: Int): QuestModel {

web/src/main/kotlin/world/phantasmal/web/questEditor/persistence/QuestEditorUiPersister.kt

@@ -0,0 +1,88 @@
+package world.phantasmal.web.questEditor.persistence
+
+import world.phantasmal.web.core.controllers.*
+import world.phantasmal.web.core.persistence.Persister
+import world.phantasmal.web.questEditor.dto.*
+
+class QuestEditorUiPersister : Persister() {
+    // TODO: Throttle this method.
+    suspend fun persistLayoutConfig(config: DockedItem) {
+        persist(LAYOUT_CONFIG_KEY, toDto(config))
+    }
+
+    suspend fun loadLayoutConfig(validWidgetIds: Set<String>): DockedItem? =
+        load<DockedItemDto>(LAYOUT_CONFIG_KEY)?.let { config ->
+            fromDto(config, validWidgetIds)
+        }
+
+    private fun toDto(item: DockedItem): DockedItemDto =
+        when (item) {
+            is DockedRow -> DockedRowDto(item.flex, item.items.map(::toDto))
+            is DockedColumn -> DockedColumnDto(item.flex, item.items.map(::toDto))
+            is DockedStack -> DockedStackDto(
+                item.activeItemIndex,
+                item.flex,
+                item.items.map(::toDto)
+            )
+            is DockedWidget -> DockedWidgetDto(item.id, item.title, item.flex)
+        }
+
+    private fun fromDto(
+        config: DockedItemDto,
+        validWidgetIds: Set<String>,
+    ): DockedItem? {
+        val foundWidgetIds = mutableSetOf<String>()
+
+        val sanitizedConfig = fromDto(config, validWidgetIds, foundWidgetIds)
+
+        if (foundWidgetIds.size != validWidgetIds.size) {
+            // A component was added or the persisted config is corrupt.
+            return null
+        }
+
+        return sanitizedConfig
+    }
+
+    /**
+     * Removes old components and adds titles and ids to current components.
+     */
+    private fun fromDto(
+        item: DockedItemDto,
+        validWidgetIds: Set<String>,
+        foundWidgetIds: MutableSet<String>,
+    ): DockedItem? =
+        when (item) {
+            is DockedContainerDto -> {
+                val items = item.items.mapNotNull { fromDto(it, validWidgetIds, foundWidgetIds) }
+
+                // Remove empty containers.
+                if (items.isEmpty()) {
+                    null
+                } else {
+                    when (item) {
+                        is DockedRowDto -> DockedRow(item.flex, items)
+                        is DockedColumnDto -> DockedColumn(item.flex, items)
+                        is DockedStackDto -> DockedStack(
+                            // Remove corrupted activeItemIndex properties.
+                            item.activeItemIndex?.takeIf { it in items.indices },
+                            item.flex,
+                            items
+                        )
+                    }
+                }
+            }
+            is DockedWidgetDto -> {
+                // Remove deprecated components.
+                if (item.id !in validWidgetIds) {
+                    null
+                } else {
+                    foundWidgetIds.add(item.id)
+                    DockedWidget(item.id, item.title, item.flex)
+                }
+            }
+        }
+
+    companion object {
+        private const val LAYOUT_CONFIG_KEY = "QuestEditorUiPersister.layout_config"
+    }
+}

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/EntityInstance.kt

@@ -1,6 +1,7 @@
 package world.phantasmal.web.questEditor.rendering
 
 import world.phantasmal.observable.value.Val
+import world.phantasmal.observable.value.map
 import world.phantasmal.web.externals.three.InstancedMesh
 import world.phantasmal.web.externals.three.Object3D
 import world.phantasmal.web.questEditor.models.QuestEntityModel
@@ -43,7 +44,8 @@ class EntityInstance(
 
         if (entity is QuestNpcModel) {
             isVisible =
-                entity.sectionInitialized.map(
+                map(
+                    entity.sectionInitialized,
                     selectedWave,
                     entity.wave
                 ) { sectionInitialized, sWave, entityWave ->

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/QuestEditorMeshManager.kt

@@ -4,6 +4,7 @@ import kotlinx.coroutines.CoroutineScope
 import world.phantasmal.lib.fileFormats.quest.Episode
 import world.phantasmal.observable.value.list.ListVal
 import world.phantasmal.observable.value.list.listVal
+import world.phantasmal.observable.value.map
 import world.phantasmal.web.questEditor.loading.AreaAssetLoader
 import world.phantasmal.web.questEditor.loading.EntityAssetLoader
 import world.phantasmal.web.questEditor.models.*
@@ -18,10 +19,13 @@ class QuestEditorMeshManager(
 ) : QuestMeshManager(scope, areaAssetLoader, entityAssetLoader, questEditorStore, renderContext) {
     init {
         addDisposables(
-            questEditorStore.currentQuest.map(questEditorStore.currentArea, ::getAreaVariantDetails)
+            map(
-                .observe { (details) ->
+                questEditorStore.currentQuest,
-                    loadMeshes(details.episode, details.areaVariant, details.npcs, details.objects)
+                questEditorStore.currentArea,
-                },
+                ::getAreaVariantDetails
+            ).observe { (details) ->
+                loadMeshes(details.episode, details.areaVariant, details.npcs, details.objects)
+            },
         )
     }
 

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

@@ -22,7 +22,7 @@ fun convertQuestToModel(
         // TODO: Add WaveModel to QuestNpcModel
         quest.npcs.mapTo(mutableListOf()) { QuestNpcModel(it, null) },
         quest.objects.mapTo(mutableListOf()) { QuestObjectModel(it) },
-        quest.byteCodeIr,
+        quest.bytecodeIr,
         getVariant
     )
 }

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

@@ -0,0 +1,68 @@
+package world.phantasmal.web.questEditor.widgets
+
+import kotlinx.coroutines.CoroutineScope
+import org.w3c.dom.Node
+import world.phantasmal.web.questEditor.controllers.EntityListController
+import world.phantasmal.webui.dom.div
+import world.phantasmal.webui.dom.img
+import world.phantasmal.webui.dom.span
+import world.phantasmal.webui.widgets.Widget
+
+class EntityListWidget(
+    scope: CoroutineScope,
+    private val ctrl: EntityListController,
+) : Widget(scope, enabled = ctrl.enabled) {
+    override fun Node.createElement() =
+        div {
+            className = "pw-quest-editor-entity-list"
+            tabIndex = -1
+
+            div {
+                className = "pw-quest-editor-entity-list-inner"
+
+                bindChildrenTo(ctrl.entities) { entityType, index ->
+                    div {
+                        className = "pw-quest-editor-entity-list-entity"
+
+                        img {
+                            width = 100
+                            height = 100
+                        }
+
+                        span {
+                            textContent = entityType.simpleName
+                        }
+                    }
+                }
+            }
+        }
+
+    companion object {
+        init {
+            @Suppress("CssUnusedSymbol")
+            // language=css
+            style("""
+                .pw-quest-editor-entity-list {
+                    outline: none;
+                    overflow: auto;
+                }
+
+                .pw-quest-editor-entity-list-inner {
+                    display: grid;
+                    grid-template-columns: repeat(auto-fill, 100px);
+                    grid-column-gap: 6px;
+                    grid-row-gap: 6px;
+                    justify-content: center;
+                    margin: 6px;
+                }
+
+                .pw-quest-editor-entity-list-entity {
+                    box-sizing: border-box;
+                    display: flex;
+                    flex-direction: column;
+                    text-align: center;
+                }
+            """.trimIndent())
+        }
+    }
+}

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

@@ -2,32 +2,33 @@ package world.phantasmal.web.questEditor.widgets
 
 import kotlinx.coroutines.CoroutineScope
 import org.w3c.dom.Node
-import world.phantasmal.web.core.widgets.*
+import world.phantasmal.web.core.widgets.DockWidget
+import world.phantasmal.web.questEditor.controllers.QuestEditorController
+import world.phantasmal.web.questEditor.controllers.QuestEditorController.Companion.ASSEMBLY_EDITOR_WIDGET_ID
+import world.phantasmal.web.questEditor.controllers.QuestEditorController.Companion.ENTITY_INFO_WIDGET_ID
+import world.phantasmal.web.questEditor.controllers.QuestEditorController.Companion.EVENTS_WIDGET_ID
+import world.phantasmal.web.questEditor.controllers.QuestEditorController.Companion.NPC_COUNTS_WIDGET_ID
+import world.phantasmal.web.questEditor.controllers.QuestEditorController.Companion.NPC_LIST_WIDGET_ID
+import world.phantasmal.web.questEditor.controllers.QuestEditorController.Companion.OBJECT_LIST_WIDGET_ID
+import world.phantasmal.web.questEditor.controllers.QuestEditorController.Companion.QUEST_INFO_WIDGET_ID
+import world.phantasmal.web.questEditor.controllers.QuestEditorController.Companion.QUEST_RENDERER_WIDGET_ID
 import world.phantasmal.webui.dom.div
 import world.phantasmal.webui.widgets.Widget
 
-// TODO: Remove TestWidget.
-private class TestWidget(scope: CoroutineScope) : Widget(scope) {
-    override fun Node.createElement() = div {
-        textContent = "Test ${++count}"
-    }
-
-    companion object {
-        private var count = 0
-    }
-}
-
 /**
  * Takes ownership of the widgets created by the given creation functions.
  */
 class QuestEditorWidget(
     scope: CoroutineScope,
-    private val createToolbar: (CoroutineScope) -> Widget,
+    private val ctrl: QuestEditorController,
-    private val createQuestInfoWidget: (CoroutineScope) -> Widget,
+    private val createToolbar: (CoroutineScope) -> QuestEditorToolbarWidget,
-    private val createNpcCountsWidget: (CoroutineScope) -> Widget,
+    private val createQuestInfoWidget: (CoroutineScope) -> QuestInfoWidget,
-    private val createEntityInfoWidget: (CoroutineScope) -> Widget,
+    private val createNpcCountsWidget: (CoroutineScope) -> NpcCountsWidget,
-    private val createQuestRendererWidget: (CoroutineScope) -> Widget,
+    private val createEntityInfoWidget: (CoroutineScope) -> EntityInfoWidget,
-    private val createAssemblyEditorWidget: (CoroutineScope) -> Widget,
+    private val createQuestRendererWidget: (CoroutineScope) -> QuestRendererWidget,
+    private val createAssemblyEditorWidget: (CoroutineScope) -> AssemblyEditorWidget,
+    private val createNpcListWidget: (CoroutineScope) -> EntityListWidget,
+    private val createObjectListWidget: (CoroutineScope) -> EntityListWidget,
 ) : Widget(scope) {
     override fun Node.createElement() =
         div {
@@ -36,69 +37,20 @@ class QuestEditorWidget(
             addChild(createToolbar(scope))
             addChild(DockWidget(
                 scope,
-                item = DockedRow(
+                ctrl = ctrl,
-                    items = listOf(
+                createWidget = { scope, id ->
-                        DockedColumn(
+                    when (id) {
-                            flex = 2,
+                        QUEST_INFO_WIDGET_ID -> createQuestInfoWidget(scope)
-                            items = listOf(
+                        NPC_COUNTS_WIDGET_ID -> createNpcCountsWidget(scope)
-                                DockedStack(
+                        ENTITY_INFO_WIDGET_ID -> createEntityInfoWidget(scope)
-                                    items = listOf(
+                        QUEST_RENDERER_WIDGET_ID -> createQuestRendererWidget(scope)
-                                        DockedWidget(
+                        ASSEMBLY_EDITOR_WIDGET_ID -> createAssemblyEditorWidget(scope)
-                                            title = "Info",
+                        NPC_LIST_WIDGET_ID -> createNpcListWidget(scope)
-                                            id = "info",
+                        OBJECT_LIST_WIDGET_ID -> createObjectListWidget(scope)
-                                            createWidget = createQuestInfoWidget
+                        EVENTS_WIDGET_ID -> null // TODO: EventsWidget.
-                                        ),
+                        else -> null
-                                        DockedWidget(
+                    }
-                                            title = "NPC Counts",
+                },
-                                            id = "npc_counts",
-                                            createWidget = createNpcCountsWidget
-                                        ),
-                                    )
-                                ),
-                                DockedWidget(
-                                    title = "Entity",
-                                    id = "entity_info",
-                                    createWidget = createEntityInfoWidget
-                                ),
-                            )
-                        ),
-                        DockedStack(
-                            flex = 9,
-                            items = listOf(
-                                DockedWidget(
-                                    title = "3D View",
-                                    id = "quest_renderer",
-                                    createWidget = createQuestRendererWidget
-                                ),
-                                DockedWidget(
-                                    title = "Script",
-                                    id = "asm_editor",
-                                    createWidget = createAssemblyEditorWidget
-                                ),
-                            )
-                        ),
-                        DockedStack(
-                            flex = 2,
-                            items = listOf(
-                                DockedWidget(
-                                    title = "NPCs",
-                                    id = "npc_list_view",
-                                    createWidget = ::TestWidget
-                                ),
-                                DockedWidget(
-                                    title = "Objects",
-                                    id = "object_list_view",
-                                    createWidget = ::TestWidget
-                                ),
-                                DockedWidget(
-                                    title = "Events",
-                                    id = "events_view",
-                                    createWidget = ::TestWidget
-                                ),
-                            )
-                        ),
-                    )
-                )
             ))
         }
 

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

@@ -4,7 +4,6 @@ import kotlinx.browser.document
 import world.phantasmal.core.disposable.Disposer
 import world.phantasmal.core.disposable.use
 import world.phantasmal.web.core.PwToolType
-import world.phantasmal.web.externals.babylon.Engine
 import world.phantasmal.web.test.TestApplicationUrl
 import world.phantasmal.web.test.WebTestSuite
 import kotlin.test.Test
@@ -22,7 +21,7 @@ class ApplicationTests : WebTestSuite() {
                         rootElement = document.body!!,
                         assetLoader = components.assetLoader,
                         applicationUrl = appUrl,
-                        createEngine = { Engine(it) }
+                        createThreeRenderer = components.createThreeRenderer,
                     )
                 )
             }

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

@@ -1,6 +1,5 @@
 package world.phantasmal.web.questEditor
 
-import world.phantasmal.web.externals.babylon.NullEngine
 import world.phantasmal.web.test.WebTestSuite
 import kotlin.test.Test
 
@@ -8,7 +7,7 @@ class QuestEditorTests : WebTestSuite() {
     @Test
     fun initialization_and_shutdown_should_succeed_without_throwing() = test {
         val questEditor = disposer.add(
-            QuestEditor(components.assetLoader, components.uiStore, createEngine = { NullEngine() })
+            QuestEditor(components.assetLoader, components.uiStore, components.createThreeRenderer)
         )
         disposer.add(questEditor.initialize(scope))
     }

web/src/test/kotlin/world/phantasmal/web/questEditor/controllers/QuestEditorToolbarControllerTests.kt

@@ -5,9 +5,7 @@ import world.phantasmal.core.Failure
 import world.phantasmal.core.Severity
 import world.phantasmal.lib.fileFormats.quest.Episode
 import world.phantasmal.lib.fileFormats.quest.NpcType
-import world.phantasmal.web.externals.babylon.Vector3
 import world.phantasmal.web.questEditor.actions.EditNameAction
-import world.phantasmal.web.questEditor.actions.TranslateEntityAction
 import world.phantasmal.web.test.WebTestSuite
 import world.phantasmal.web.test.createQuestModel
 import world.phantasmal.web.test.createQuestNpcModel
@@ -81,7 +79,9 @@ class QuestEditorToolbarControllerTests : WebTestSuite() {
         assertFalse(ctrl.redoEnabled.value)
 
         // Add an action to the undo stack.
-        components.questEditorStore.executeAction(EditNameAction(quest, "New Name", quest.name.value))
+        components.questEditorStore.executeAction(
+            EditNameAction(quest, "New Name", quest.name.value)
+        )
 
         assertEquals("Undo \"Edit name\" (Ctrl-Z)", ctrl.undoTooltip.value)
         assertTrue(ctrl.undoEnabled.value)

web/src/test/kotlin/world/phantasmal/web/test/NoopRenderer.kt

@@ -0,0 +1,12 @@
+package world.phantasmal.web.test
+
+import org.w3c.dom.HTMLCanvasElement
+import world.phantasmal.web.externals.three.Camera
+import world.phantasmal.web.externals.three.Object3D
+import world.phantasmal.web.externals.three.Renderer
+
+class NoopRenderer(override val domElement: HTMLCanvasElement) : Renderer {
+    override fun render(scene: Object3D, camera: Camera) {}
+
+    override fun setSize(width: Double, height: Double) {}
+}

web/src/test/kotlin/world/phantasmal/web/test/TestComponents.kt

@@ -4,14 +4,14 @@ import io.ktor.client.*
 import io.ktor.client.features.json.*
 import io.ktor.client.features.json.serializer.*
 import kotlinx.coroutines.cancel
+import org.w3c.dom.HTMLCanvasElement
 import world.phantasmal.core.disposable.Disposable
 import world.phantasmal.core.disposable.disposable
 import world.phantasmal.testUtils.TestContext
 import world.phantasmal.web.core.loading.AssetLoader
+import world.phantasmal.web.core.rendering.DisposableThreeRenderer
 import world.phantasmal.web.core.stores.ApplicationUrl
 import world.phantasmal.web.core.stores.UiStore
-import world.phantasmal.web.externals.babylon.NullEngine
-import world.phantasmal.web.externals.babylon.Scene
 import world.phantasmal.web.questEditor.loading.AreaAssetLoader
 import world.phantasmal.web.questEditor.loading.QuestLoader
 import world.phantasmal.web.questEditor.stores.AreaStore
@@ -37,16 +37,12 @@ class TestComponents(private val ctx: TestContext) {
 
     var applicationUrl: ApplicationUrl by default { TestApplicationUrl("") }
 
-    // Babylon.js
-
-    var scene: Scene by default { Scene(NullEngine()) }
-
     // Asset Loaders
 
     var assetLoader: AssetLoader by default { AssetLoader(httpClient, basePath = "/assets") }
 
     var areaAssetLoader: AreaAssetLoader by default {
-        AreaAssetLoader(ctx.scope, assetLoader, scene)
+        AreaAssetLoader(ctx.scope, assetLoader)
     }
 
     var questLoader: QuestLoader by default { QuestLoader(ctx.scope, assetLoader) }
@@ -61,6 +57,16 @@ class TestComponents(private val ctx: TestContext) {
         QuestEditorStore(ctx.scope, uiStore, areaStore)
     }
 
+    // Rendering
+    var createThreeRenderer: (HTMLCanvasElement) -> DisposableThreeRenderer by default {
+        { canvas ->
+            object : DisposableThreeRenderer {
+                override val renderer = NoopRenderer(canvas)
+                override fun dispose() {}
+            }
+        }
+    }
+
     private fun <T> default(defaultValue: () -> T) = LazyDefault {
         val value = defaultValue()
 

web/src/test/kotlin/world/phantasmal/web/test/TestModels.kt

@@ -16,7 +16,7 @@ fun createQuestModel(
     episode: Episode = Episode.I,
     npcs: List<QuestNpcModel> = emptyList(),
     objects: List<QuestObjectModel> = emptyList(),
-    byteCodeIr: List<Segment> = emptyList(),
+    bytecodeIr: List<Segment> = emptyList(),
 ): QuestModel =
     QuestModel(
         id,
@@ -28,7 +28,7 @@ fun createQuestModel(
         emptyMap(),
         npcs.toMutableList(),
         objects.toMutableList(),
-        byteCodeIr,
+        bytecodeIr,
     ) { _, _, _ -> null }
 
 fun createQuestNpcModel(type: NpcType, episode: Episode): QuestNpcModel =

web/src/test/kotlin/world/phantasmal/web/viewer/ViewerTests.kt

@@ -1,6 +1,5 @@
 package world.phantasmal.web.viewer
 
-import world.phantasmal.web.externals.babylon.Engine
 import world.phantasmal.web.test.WebTestSuite
 import kotlin.test.Test
 
@@ -8,7 +7,7 @@ class ViewerTests : WebTestSuite() {
     @Test
     fun initialization_and_shutdown_should_succeed_without_throwing() = test {
         val viewer = disposer.add(
-            Viewer(createEngine = { Engine(it) })
+            Viewer(components.createThreeRenderer)
         )
         disposer.add(viewer.initialize(scope))
     }