@jxsuite/studio 6.1.0 → 6.1.2

package/src/surfaces/rail.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioRail",
-  "$description": "The Navigator rail: a rendering of the panel registry. The adapter hands in `groups`, every rail-able panel grouped by level with its selected state and badge, and `settingsVisible`/`settingsOpen` for the foot's gear. Nothing here is a list of panels. Each button prints its record's short `railLabel` under the glyph, falling back to `title`, and carries the full `title` as its accessible name and tooltip: the visible words lead the name a reader hears (WCAG 2.5.3), and the tooltip restores what a short label leaves out.",
+  "$description": "The Navigator rail: a rendering of the panel registry. The adapter hands in `groups`, every rail-able panel grouped by level with its selected state and badge, and, for the foot, `libraryVisible`/`libraryOpen` for the Library button and `settingsVisible`/`settingsOpen` for the gear. Nothing here is a list of panels. Each button prints its record's short `railLabel` under the glyph, falling back to `title`, and carries the full `title` as its accessible name and tooltip: the visible words lead the name a reader hears (WCAG 2.5.3), and the tooltip restores what a short label leaves out.",
   "tagName": "div",
   "attributes": {
     "part": "rail"
@@ -162,94 +162,147 @@
       "attributes": {
         "part": "foot"
       },
-      "$switch": {
-        "$ref": "#/state/settingsVisible"
-      },
-      "cases": {
-        "true": {
-          "tagName": "jx-action-button",
-          "$props": {
-            "label": "Settings",
-            "hint": "Settings",
-            "icon": "gear",
-            "stacked": true,
-            "haspopup": "menu",
-            "expanded": {
-              "$ref": "#/state/settingsOpen"
-            }
+      "children": [
+        {
+          "$switch": {
+            "$ref": "#/state/libraryVisible"
           },
+          "tagName": "div",
           "attributes": {
-            "data-rail-menu": "settings",
-            "data-expanded": "${state.settingsOpen ? '' : null}"
+            "part": "foot-library"
           },
-          "onclick": {
-            "$prototype": "Function",
-            "body": [
-              {
-                "operator": "call",
-                "target": {
-                  "$ref": "#/state/openSettings"
-                },
-                "value": [
+          "cases": {
+            "true": {
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "Library",
+                "hint": "Library",
+                "icon": "books",
+                "stacked": true,
+                "selected": {
+                  "$ref": "#/state/libraryOpen"
+                }
+              },
+              "attributes": {
+                "data-rail-action": "library.open"
+              },
+              "onclick": {
+                "$prototype": "Function",
+                "body": [
                   {
-                    "$ref": "event#/currentTarget"
+                    "operator": "call",
+                    "target": {
+                      "$ref": "#/state/openLibrary"
+                    },
+                    "value": []
                   }
                 ]
-              }
-            ]
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "Library"
+                }
+              ]
+            }
+          }
+        },
+        {
+          "tagName": "div",
+          "attributes": {
+            "part": "foot-settings"
           },
-          "onkeydown": {
-            "$prototype": "Function",
-            "body": [
-              {
-                "$switch": {
-                  "$ref": "event#/key"
-                },
-                "cases": {
-                  "ArrowUp": [
-                    {
-                      "operator": "call",
-                      "target": {
-                        "$ref": "#/state/openSettings"
-                      },
-                      "value": [
+          "$switch": {
+            "$ref": "#/state/settingsVisible"
+          },
+          "cases": {
+            "true": {
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "Settings",
+                "hint": "Settings",
+                "icon": "gear",
+                "stacked": true,
+                "haspopup": "menu",
+                "expanded": {
+                  "$ref": "#/state/settingsOpen"
+                }
+              },
+              "attributes": {
+                "data-rail-menu": "settings",
+                "data-expanded": "${state.settingsOpen ? '' : null}"
+              },
+              "onclick": {
+                "$prototype": "Function",
+                "body": [
+                  {
+                    "operator": "call",
+                    "target": {
+                      "$ref": "#/state/openSettings"
+                    },
+                    "value": [
+                      {
+                        "$ref": "event#/currentTarget"
+                      }
+                    ]
+                  }
+                ]
+              },
+              "onkeydown": {
+                "$prototype": "Function",
+                "body": [
+                  {
+                    "$switch": {
+                      "$ref": "event#/key"
+                    },
+                    "cases": {
+                      "ArrowUp": [
+                        {
+                          "operator": "call",
+                          "target": {
+                            "$ref": "#/state/openSettings"
+                          },
+                          "value": [
+                            {
+                              "$ref": "event#/currentTarget"
+                            }
+                          ]
+                        },
                         {
-                          "$ref": "event#/currentTarget"
+                          "preventDefault": true
                         }
-                      ]
-                    },
-                    {
-                      "preventDefault": true
-                    }
-                  ],
-                  "ArrowDown": [
-                    {
-                      "operator": "call",
-                      "target": {
-                        "$ref": "#/state/openSettings"
-                      },
-                      "value": [
+                      ],
+                      "ArrowDown": [
+                        {
+                          "operator": "call",
+                          "target": {
+                            "$ref": "#/state/openSettings"
+                          },
+                          "value": [
+                            {
+                              "$ref": "event#/currentTarget"
+                            }
+                          ]
+                        },
                         {
-                          "$ref": "event#/currentTarget"
+                          "preventDefault": true
                         }
                       ]
-                    },
-                    {
-                      "preventDefault": true
                     }
-                  ]
+                  }
+                ]
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "Settings"
                 }
-              }
-            ]
-          },
-          "children": [
-            {
-              "tagName": "span",
-              "textContent": "Settings"
+              ]
             }
-          ]
+          }
         }
-      }
+      ],
+      "$description": "The two rail buttons that open no Navigator panel: the Library, which is a canvas tab rather than a panel and so sits with the other exception, above the gear."
     }
   ]
 }

package/src/surfaces/rail.ts

@@ -14,9 +14,11 @@
  * record's `railLabel` when it declares one (Source Control's is "Source", because the full title
  * ellipsed in the 48px label box), and the full `title` stays the accessible name and the tooltip.
  *
- * The foot is the ⚙ **Settings** menu, a menu button rendered from the `settings/menu` placement: a
- * record joins the gear by declaring the placement and there is nothing here to update in step.
- * With no registry, or one that declares nothing for it, there is no foot.
+ * The foot holds the two buttons that open no Navigator panel. **Library** runs `library.open`: the
+ * Library is a canvas tab, not a panel, and its button is pressed while that tab is the focused
+ * one. Below it is the ⚙ **Settings** menu, a menu button rendered from the `settings/menu`
+ * placement: a record joins the gear by declaring the placement and there is nothing here to update
+ * in step. With no registry, or one that declares nothing for either, the foot is empty.
  *
  * What this adapter owns is the projection and the two decisions: which panel a button toggles, and
  * where the gear's menu opens. The scope is reactive, so the surface follows `shell` through one
@@ -31,6 +33,7 @@ import { refreshGitStatus } from "../panels/git-panel";
 import { panelContext, railGroups } from "../panels/panel-registry";
 import { registerNavigatorPanels } from "../panels/navigator-panels";
 import { activeRegistry } from "../commands/active-registry";
+import { runActiveReported } from "../commands/run-reported";
 import {
   dismissSettingsMenu,
   isSettingsMenuOpen,
@@ -38,14 +41,15 @@ import {
   SETTINGS_MENU_PLACEMENT,
 } from "../panels/settings-menu";
 import { mountSurface, registerSurface } from "../ui/surface";
+import { libraryTabId } from "../browse/library-source";
+import { activeTab } from "../workspace/workspace";
 import railDoc from "./rail.json";
 
 import type { EffectScope } from "@vue/reactivity";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { PanelRecord } from "../panels/panel-registry";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("rail", railDoc as unknown as JxDocument);
+registerSurface("rail", railDoc);
 
 /** One rail button, as the surface reads it. */
 interface RailButton {
@@ -67,12 +71,21 @@ interface RailGroupProjection {
   panels: RailButton[];
 }
 
-interface RailScope extends Record<string, unknown> {
+/** The parts of the rail's scope recomputed from the registry and the shell on every render. */
+type RailProjection = Pick<
+  RailScope,
+  "groups" | "libraryOpen" | "libraryVisible" | "settingsVisible"
+>;
+
+interface RailScope {
   groups: RailGroupProjection[];
   settingsVisible: boolean;
   settingsOpen: boolean;
+  libraryVisible: boolean;
+  libraryOpen: boolean;
+  openLibrary: () => void;
   toggle: (id: string) => void;
-  openSettings: (anchor: unknown) => void;
+  openSettings: (anchor: EventTarget | null) => void;
 }
 
 let _scope: EffectScope | null = null;
@@ -104,7 +117,7 @@ export function toggleRailPanel(panel: PanelRecord): void {
 }
 
 /** The rail, as the surface reads it, from the registry and the shell as they stand now. */
-function project(): { groups: RailGroupProjection[]; settingsVisible: boolean } {
+function project(): RailProjection {
   const ctx = panelContext();
   const groups = railGroups(ctx).map((group, index) => ({
     dividerAbove: index > 0,
@@ -122,14 +135,25 @@ function project(): { groups: RailGroupProjection[]; settingsVisible: boolean }
   const registry = activeRegistry();
   const settingsVisible =
     registry !== null && registry.forPlacement(SETTINGS_MENU_PLACEMENT).length > 0;
-  return { groups, settingsVisible };
+  const libraryVisible =
+    registry?.get(LIBRARY_COMMAND) !== undefined && registry.isVisible(LIBRARY_COMMAND);
+  const libraryOpen = activeTab.value?.id === libraryTabId();
+  return { groups, libraryOpen, libraryVisible, settingsVisible };
 }
 
+/** The command the Library button runs: the record decides when it can, and what opening means. */
+const LIBRARY_COMMAND = "library.open";
+
 /** The reactive scope the surface reads, made once. */
 function state(): RailScope {
-  _state ??= reactive({
+  _state ??= reactive<RailScope>({
     groups: [],
-    openSettings: (anchor: unknown) => {
+    libraryOpen: false,
+    libraryVisible: false,
+    openLibrary: () => {
+      void runActiveReported(LIBRARY_COMMAND, undefined, "Navigator rail");
+    },
+    openSettings: (anchor: EventTarget | null) => {
       if (!(anchor instanceof HTMLElement)) {
         return;
       }
@@ -151,7 +175,7 @@ function state(): RailScope {
         toggleRailPanel(panel);
       }
     },
-  }) as RailScope;
+  });
   return _state;
 }
 
@@ -161,6 +185,8 @@ export function renderActivityBar(): void {
   const next = project();
   scope.groups = next.groups;
   scope.settingsVisible = next.settingsVisible;
+  scope.libraryVisible = next.libraryVisible;
+  scope.libraryOpen = next.libraryOpen;
   scope.settingsOpen = isSettingsMenuOpen();
   ensureMounted();
 }

package/src/surfaces/reference-field.ts

@@ -25,16 +25,9 @@ import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import referenceDoc from "./reference-field.json";
 
-import type { JxDocument } from "@jxsuite/schema/types";
-import type { SurfaceHandle } from "../ui/surface";
+import type { SurfaceHandle, SurfaceOption } from "../ui/surface";
 
-registerSurface("reference-field", referenceDoc as unknown as JxDocument);
-
-/** One row of the picker: an entry id, the empty row, or the value that is not on disk. */
-export interface ReferenceChoice {
-  value: string;
-  label: string;
-}
+registerSurface("reference-field", referenceDoc);
 
 /** What the field says right now. Every field is the flow's, never a state it derives. */
 export interface ReferenceFieldView {
@@ -50,7 +43,7 @@ export interface ReferenceFieldView {
   /** The entry id the field holds, as a string. */
   value: string;
   /** The picker's rows, in the order they are offered. Empty on a text field. */
-  options: ReferenceChoice[];
+  options: SurfaceOption[];
   /** True while the read is in flight: the picker is inert and says so in its one row. */
   disabled: boolean;
   /** A sentence under the control. Empty draws none. */
@@ -82,8 +75,7 @@ export interface ReferenceFieldSurfaceHandle {
   dispose: () => void;
 }
 
-interface ReferenceScope
-  extends Record<string, unknown>, ReferenceFieldView, ReferenceFieldActions {}
+interface ReferenceScope extends ReferenceFieldView, ReferenceFieldActions {}
 
 /** The view a freshly mounted surface starts on: a picker that has not been told anything. */
 function emptyView(): ReferenceFieldView {
@@ -112,7 +104,7 @@ export function mountReferenceFieldSurface(
   actions: ReferenceFieldActions,
 ): ReferenceFieldSurfaceHandle {
   host.textContent = "";
-  const scope = reactive<ReferenceScope>({ ...emptyView(), ...actions }) as ReferenceScope;
+  const scope: ReferenceScope = reactive<ReferenceScope>({ ...emptyView(), ...actions });
 
   /** `null` while a mount is in flight — which is a standing surface, not a missing one. */
   let handle: SurfaceHandle | null = null;
@@ -121,13 +113,17 @@ export function mountReferenceFieldSurface(
 
   const mount = (): Promise<HTMLElement> =>
     mountSurface("reference-field", scope, host).then((mounted) => {
+      /* SAFETY: `reference-field.json`'s root definition carries `tagName: "div"`, so the runtime
+         mounts an HTMLElement; a `Text` root only comes from a document whose root is a bare
+         string. */
+      const root = mounted.root as HTMLElement;
       mounting = false;
       if (disposed) {
         mounted.dispose();
-        return mounted.root as HTMLElement;
+        return root;
       }
       handle = mounted;
-      return mounted.root as HTMLElement;
+      return root;
     });
 
   const ready = mount();

package/src/surfaces/schema-builder.ts

@@ -19,7 +19,7 @@
  * Settings › Data Shapes edits the project's `$defs` and this edits a content type's `schema`, and
  * they are the same object drawn with the same six controls per row — so the two documents are the
  * same card inside a different shell, and the views are one set of types. A second declaration of
- * {@link SchemaFieldView} would be the point at which the two cards start to drift, one field at a
+ * {@link DefsFieldView} would be the point at which the two cards start to drift, one field at a
  * time, with nothing failing.
  *
  * @docs studio/data/tables
@@ -29,28 +29,18 @@ import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import builderDoc from "./schema-builder.json";
 
-import type { JxDocument } from "@jxsuite/schema/types";
-import type { SurfaceHandle } from "../ui/surface";
-import type { DefsChoice, DefsFieldView, NestedFieldView } from "./settings-defs";
+import type { SurfaceHandle, SurfaceOption } from "../ui/surface";
+import type { DefsFieldView } from "./settings-defs";
 
-registerSurface("schema-builder", builderDoc as unknown as JxDocument);
-
-/** One row of a picker: a field type, a format, or a reference target. */
-export type SchemaFieldChoice = DefsChoice;
-
-/** One field of the object being edited, as the document draws it. */
-export type SchemaFieldView = DefsFieldView;
-
-/** One child of an `object` field. It carries its parent — a nested `$map` shadows `$map.item`. */
-export type NestedSchemaFieldView = NestedFieldView;
+registerSurface("schema-builder", builderDoc);
 
 /** Everything the document draws, as one value. */
 export interface SchemaBuilderView {
-  fields: SchemaFieldView[];
-  typeOptions: SchemaFieldChoice[];
-  formatOptions: SchemaFieldChoice[];
+  fields: DefsFieldView[];
+  typeOptions: SurfaceOption[];
+  formatOptions: SurfaceOption[];
   /** The content types a reference field can point at. Empty draws no target picker. */
-  targets: SchemaFieldChoice[];
+  targets: SurfaceOption[];
   /** Whether the foot of the list is offering the add button or the add form. */
   addState: "closed" | "open";
   addName: string;
@@ -94,7 +84,7 @@ export interface SchemaBuilderSurfaceHandle {
   dispose: () => void;
 }
 
-interface BuilderScope extends Record<string, unknown>, SchemaBuilderView, SchemaBuilderActions {}
+interface BuilderScope extends SchemaBuilderView, SchemaBuilderActions {}
 
 /** The view a freshly mounted surface starts on: no fields, and no add form. */
 function emptyView(): SchemaBuilderView {
@@ -124,7 +114,7 @@ export function mountSchemaBuilderSurface(
   actions: SchemaBuilderActions,
 ): SchemaBuilderSurfaceHandle {
   host.textContent = "";
-  const scope = reactive<BuilderScope>({ ...emptyView(), ...actions }) as BuilderScope;
+  const scope: BuilderScope = reactive<BuilderScope>({ ...emptyView(), ...actions });
 
   /** `null` while a mount is in flight — which is a standing surface, not a missing one. */
   let handle: SurfaceHandle | null = null;
@@ -133,13 +123,17 @@ export function mountSchemaBuilderSurface(
 
   const mount = (): Promise<HTMLElement> =>
     mountSurface("schema-builder", scope, host).then((mounted) => {
+      /* SAFETY: `schema-builder.json`'s root definition carries `tagName: "div"`, so the runtime
+         mounts an HTMLElement; a `Text` root only comes from a document whose root is a bare
+         string. */
+      const root = mounted.root as HTMLElement;
       mounting = false;
       if (disposed) {
         mounted.dispose();
-        return mounted.root as HTMLElement;
+        return root;
       }
       handle = mounted;
-      return mounted.root as HTMLElement;
+      return root;
     });
 
   const ready = mount();

package/src/surfaces/schema-form.ts

@@ -29,14 +29,15 @@
  * @docs extending/ui-kit
  */
 
+import { isJsonObject, isString } from "@jxsuite/schema/guards";
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import schemaFormDoc from "./schema-form.json";
-import type { SurfaceHandle } from "../ui/surface";
+import type { KeyedLabel, SurfaceHandle, SurfaceOption } from "../ui/surface";
 import type { JxScope } from "@jxsuite/runtime/types";
-import type { JxDocument, JxElement } from "@jxsuite/schema/types";
+import type { JxElement } from "@jxsuite/schema/types";
 
-registerSurface("schema-form", schemaFormDoc as unknown as JxDocument);
+registerSurface("schema-form", schemaFormDoc);
 
 /** Which of the nine controls a row draws. The flow picks it; the document switches on it. */
 export type SchemaFormFieldKind =
@@ -50,12 +51,6 @@ export type SchemaFormFieldKind =
   | "rows"
   | "control";
 
-/** A control a row offers as a closed list, in the shape the kit's select reads. */
-export interface SchemaFormOption {
-  value: string;
-  label: string;
-}
-
 /** One cell of an array-of-objects row: a single declared property of one item. */
 export interface SchemaFormCellView {
   /** `${field}/${row}/${key}` — the cell's reconcile identity, and a control host's id. */
@@ -70,7 +65,7 @@ export interface SchemaFormCellView {
   kind: "text" | "select" | "checkbox" | "number" | "control";
   value: string;
   checked: boolean;
-  options: SchemaFormOption[];
+  options: SurfaceOption[];
 }
 
 /** One item of an array-of-objects field. */
@@ -84,12 +79,6 @@ export interface SchemaFormRowView {
   cells: SchemaFormCellView[];
 }
 
-/** A read of the shape a JSON field currently holds: `title: string`. */
-export interface SchemaFormChipView {
-  key: string;
-  label: string;
-}
-
 /** One property of the schema, as the document draws it. Every field is already decided. */
 export interface SchemaFormFieldView {
   /** The schema property key: this row's reconcile identity, and what every callback names. */
@@ -106,7 +95,7 @@ export interface SchemaFormFieldView {
   checked: boolean;
   placeholder: string;
   /** Choices for `select`, suggestions for `pointer`. */
-  options: SchemaFormOption[];
+  options: SurfaceOption[];
   /** Whether the pointer rung has anything to suggest; with none it is a field alone. */
   hasOptions: boolean;
   /** Bounds off the property schema, so the control refuses out-of-range input itself. */
@@ -138,7 +127,7 @@ export interface SchemaFormFieldView {
   /** The position permits exactly one rung, so the chip states it and refuses to open. */
   sourceLocked: boolean;
   /** The chips above a JSON field, naming the shape it holds. */
-  chips: SchemaFormChipView[];
+  chips: KeyedLabel[];
   hasChips: boolean;
   rows: SchemaFormRowView[];
   /** The add button's accessible name on an array-of-objects field. */
@@ -179,7 +168,7 @@ export interface SchemaFormSurface {
 /** A control host the document drew, reported as the runtime created it. */
 export type ControlHostSink = (id: string, host: HTMLElement) => void;
 
-interface SchemaFormScope extends Record<string, unknown>, SchemaFormView, SchemaFormActions {
+interface SchemaFormScope extends SchemaFormView, SchemaFormActions {
   /** The Mixed text placeholder, held in state because the literal is itself a template. */
   templatePlaceholder: string;
 }
@@ -194,20 +183,21 @@ interface SchemaFormScope extends Record<string, unknown>, SchemaFormView, Schem
  * node that needs filling.
  */
 function controlIdOf(part: string, state: JxScope | undefined): string {
-  const item = (state?.["$map"] as { item?: Record<string, unknown> } | undefined)?.item;
+  const map = state?.["$map"];
+  const item = isJsonObject(map) && isJsonObject(map["item"]) ? map["item"] : undefined;
   const id =
     part === "control-host"
       ? item?.["key"]
       : part === "cell-control-host"
         ? item?.["id"]
         : undefined;
-  return typeof id === "string" ? id : "";
+  return isString(id) ? id : "";
 }
 
 /** A node definition's `part`, as written in the document. */
 function partOf(def: JxElement | string): string {
-  const part = typeof def === "string" ? undefined : def.attributes?.["part"];
-  return typeof part === "string" ? part : "";
+  const part = isString(def) ? undefined : def.attributes?.["part"];
+  return isString(part) ? part : "";
 }
 
 /**
@@ -226,11 +216,11 @@ export function createSchemaFormSurface(
 ): SchemaFormSurface {
   const host = document.createElement("div");
   host.style.display = "contents";
-  const scope = reactive({
+  const scope: SchemaFormScope = reactive<SchemaFormScope>({
     ...view,
     ...actions,
     templatePlaceholder: "${state.…}",
-  }) as SchemaFormScope;
+  });
 
   /** `null` while a mount is in flight — which is a standing surface, not a missing one. */
   let handle: SurfaceHandle | null = null;

package/src/surfaces/secret-field.ts

@@ -28,10 +28,9 @@ import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import secretDoc from "./secret-field.json";
 
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("secret-field", secretDoc as unknown as JxDocument);
+registerSurface("secret-field", secretDoc);
 
 /** What the field says right now. Every field is the flow's, never a state it derives. */
 export interface SecretFieldView {
@@ -65,7 +64,7 @@ export interface SecretFieldSurfaceHandle {
   dispose: () => void;
 }
 
-interface SecretScope extends Record<string, unknown>, SecretFieldView, SecretFieldActions {
+interface SecretScope extends SecretFieldView, SecretFieldActions {
   /**
    * What the field's value is bound to, and the whole of the "never render a secret back" rule.
    *
@@ -92,7 +91,7 @@ export function mountSecretFieldSurface(
   actions: SecretFieldActions,
 ): SecretFieldSurfaceHandle {
   host.textContent = "";
-  const scope = reactive<SecretScope>({ ...emptyView(), ...actions, shown: "" }) as SecretScope;
+  const scope: SecretScope = reactive<SecretScope>({ ...emptyView(), ...actions, shown: "" });
 
   /** `null` while a mount is in flight — which is a standing surface, not a missing one. */
   let handle: SurfaceHandle | null = null;
@@ -101,13 +100,17 @@ export function mountSecretFieldSurface(
 
   const mount = (): Promise<HTMLElement> =>
     mountSurface("secret-field", scope, host).then((mounted) => {
+      /* SAFETY: `secret-field.json`'s root definition carries `tagName: "div"`, so the runtime
+         mounts an HTMLElement; a `Text` root only comes from a document whose root is a bare
+         string. */
+      const root = mounted.root as HTMLElement;
       mounting = false;
       if (disposed) {
         mounted.dispose();
-        return mounted.root as HTMLElement;
+        return root;
       }
       handle = mounted;
-      return mounted.root as HTMLElement;
+      return root;
     });
 
   const ready = mount();