@jxsuite/studio 6.1.1 → 6.1.2

package/src/surfaces/panel-deploy-checklist.ts

@@ -31,10 +31,9 @@ import { effect, effectScope, reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import checklistDoc from "./panel-deploy-checklist.json";
 import type { EffectScope } from "@vue/reactivity";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-deploy-checklist", checklistDoc as unknown as JxDocument);
+registerSurface("panel-deploy-checklist", checklistDoc);
 
 /** One prerequisite, as the document draws it. Every field is a value: no records, no closures. */
 export interface DeployStepRowView {
@@ -81,7 +80,7 @@ export interface DeployChecklistDeps {
 }
 
 /** The scope the document reads: the projection, flattened, beside the one callback. */
-interface DeployChecklistScope extends Record<string, unknown>, DeployChecklistView {
+interface DeployChecklistScope extends DeployChecklistView {
   runAction: () => void;
 }
 
@@ -109,7 +108,7 @@ function standingIn(container: HTMLElement): boolean {
     return false;
   }
   // Still mounting into this very container: a second call must not start a second mount.
-  return _handle === null ? _mount !== null : (_handle.root as Node).parentNode === container;
+  return _handle === null ? _mount !== null : _handle.root.parentNode === container;
 }
 
 /**
@@ -127,7 +126,7 @@ export function mountDeployChecklistSurface(
   }
   disposeDeployChecklistSurface();
   _container = container;
-  const scope = reactive<DeployChecklistScope>({
+  const scope: DeployChecklistScope = reactive<DeployChecklistScope>({
     actionDisabled: false,
     actionLabel: "",
     actionTitle: "",
@@ -138,7 +137,7 @@ export function mountDeployChecklistSurface(
     runAction: deps.runAction,
     steps: [],
     summary: "",
-  }) as DeployChecklistScope;
+  });
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {

package/src/surfaces/panel-elements.ts

@@ -32,10 +32,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import elementsDoc from "./panel-elements.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-elements", elementsDoc as unknown as JxDocument);
+registerSurface("panel-elements", elementsDoc);
 
 /** One insertable HTML element: the tag is its identity, its caption and what a click inserts. */
 export interface ElementCardView {
@@ -103,7 +102,7 @@ export interface ElementsSurfaceHandle {
 }
 
 /** The scope the document reads: {@link ElementsValues} plus the actions its controls call. */
-interface ElementsScope extends Record<string, unknown>, ElementsValues, ElementsActions {}
+interface ElementsScope extends ElementsValues, ElementsActions {}
 
 /** Write a projection into the scope. */
 function project(scope: ElementsScope, values: ElementsValues): void {
@@ -128,7 +127,7 @@ export function mountElementsSurface(
   values: ElementsValues,
   actions: ElementsActions,
 ): ElementsSurfaceHandle {
-  const scope = reactive<ElementsScope>({
+  const scope: ElementsScope = reactive<ElementsScope>({
     categories: [],
     clearFilter: actions.clearFilter,
     components: [],
@@ -141,7 +140,7 @@ export function mountElementsSurface(
     setComponentsOpen: actions.setComponentsOpen,
     setFilter: actions.setFilter,
     setSectionOpen: actions.setSectionOpen,
-  }) as ElementsScope;
+  });
   project(scope, values);
 
   let mounted: SurfaceHandle | null = null;
@@ -163,8 +162,7 @@ export function mountElementsSurface(
        taken away, and answering no would start a second mount racing the first. Once mounted the
        question is whether the root is still in the container — a panel that was switched away from
        had its document cleared out from under it by lit. */
-    connected: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    connected: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();

package/src/surfaces/panel-i18n.ts

@@ -24,10 +24,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import i18nDoc from "./panel-i18n.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-i18n", i18nDoc as unknown as JxDocument);
+registerSurface("panel-i18n", i18nDoc);
 
 /** Which of the three bodies the panel is showing. */
 export type I18nMode =
@@ -105,7 +104,7 @@ export interface I18nSurfaceHandle {
  * Each `has*` is the flattening of a presence test: a document switches on a VALUE, so "is there a
  * failure to report" has to arrive as a boolean rather than as a string the markup could measure.
  */
-interface I18nScope extends Record<string, unknown> {
+interface I18nScope {
   mode: I18nMode;
   settingsDisabled: boolean;
   summary: string;
@@ -166,7 +165,7 @@ export function mountI18nSurface(
   values: I18nValues,
   actions: I18nActions,
 ): I18nSurfaceHandle {
-  const scope = reactive<I18nScope>({
+  const scope: I18nScope = reactive<I18nScope>({
     hasIncomplete: false,
     hasRows: false,
     hasTruncated: false,
@@ -180,7 +179,7 @@ export function mountI18nSurface(
     settingsDisabled: false,
     summary: "",
     truncated: "",
-  }) as I18nScope;
+  });
   project(scope, values);
 
   let mounted: SurfaceHandle | null = null;
@@ -201,8 +200,7 @@ export function mountI18nSurface(
     /* In flight the answer is yes: nothing has landed yet, so there is nothing that could have been
        taken away. Once mounted the question is simply whether the root is still in the container —
        a panel that was switched away from had its document cleared out from under it by lit. */
-    connected: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    connected: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();

package/src/surfaces/panel-imports.ts

@@ -33,10 +33,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import importsDoc from "./panel-imports.json";
-import type { SurfaceHandle } from "../ui/surface";
-import type { JxDocument } from "@jxsuite/schema/types";
+import type { SurfaceHandle, SurfaceOption } from "../ui/surface";
 
-registerSurface("panel-imports", importsDoc as unknown as JxDocument);
+registerSurface("panel-imports", importsDoc);
 
 /** One imported module: the name a document refers to it by, and the path it is loaded from. */
 export interface ModuleRow {
@@ -70,12 +69,6 @@ export interface PackageRow {
   components: ComponentRow[];
 }
 
-/** One row of the component picker: a project component this document has not imported yet. */
-export interface PickerOption {
-  value: string;
-  label: string;
-}
-
 /** What the panel shows — the flow's projection of the project and the open document. */
 export interface ImportsView {
   /**
@@ -94,7 +87,7 @@ export interface ImportsView {
   /** What the component picker currently shows. `""` is its own empty row, never a component. */
   pickerValue: string;
   /** The components this document could still import. Empty when there are none to offer. */
-  pickerOptions: PickerOption[];
+  pickerOptions: SurfaceOption[];
   /**
    * The sentence drawn where the `$ref` list would be. The flow chooses it: "pick one below" and
    * "this project has none yet" are two different absences, and only the flow knows which it is
@@ -135,7 +128,7 @@ interface ImportsFlags {
   hasOptions: boolean;
 }
 
-interface ImportsScope extends Record<string, unknown>, ImportsView, ImportsActions, ImportsFlags {}
+interface ImportsScope extends ImportsView, ImportsActions, ImportsFlags {}
 
 interface Mounted {
   scope: ImportsScope;
@@ -152,7 +145,7 @@ const mounts = new WeakMap<HTMLElement, Mounted>();
  * control lies about what it holds — and the row is what the closed control reads as, which is why
  * it is worded as the invitation rather than as a blank.
  */
-const PICK_NOTHING: PickerOption = { label: "Add component…", value: "" };
+const PICK_NOTHING: SurfaceOption = { label: "Add component…", value: "" };
 
 /** The view plus the flags the document switches on. */
 function derive(view: ImportsView): ImportsView & ImportsFlags {
@@ -191,7 +184,7 @@ export function renderImportsSurface(
   }
   existing?.handle?.dispose();
   host.textContent = "";
-  const scope = reactive({ ...derive(view), ...actions }) as ImportsScope;
+  const scope: ImportsScope = reactive<ImportsScope>({ ...derive(view), ...actions });
   const record: Mounted = { handle: null, scope };
   mounts.set(host, record);
   /* No race to arbitrate: a redraw arriving while this is in flight takes the branch above — a

package/src/surfaces/panel-outline.ts

@@ -40,14 +40,15 @@
  * @docs studio/design/layers
  */
 
+import { isString } from "@jxsuite/schema/guards";
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import outlineDoc from "./panel-outline.json";
-import type { JxDocument, JxElement } from "@jxsuite/schema/types";
+import type { JxElement } from "@jxsuite/schema/types";
 import type { JxScope } from "@jxsuite/runtime/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-outline", outlineDoc as unknown as JxDocument);
+registerSurface("panel-outline", outlineDoc);
 
 /**
  * One verb on a row, already resolved against THAT ROW'S node.
@@ -193,10 +194,13 @@ export interface OutlineActions {
    * `data-jx-path` is for.
    */
   contextMenu: (scope: JxScope, event: Event) => void;
-  /** Run one of the row's verbs, against the row rather than against the selection. */
-  runRow: (id: string, row: string, control: unknown) => void;
-  /** Open the `⋮` menu under its own button. */
-  overflowRow: (key: string, opener: unknown) => void;
+  /**
+   * Run one of the row's verbs, against the row rather than against the selection. `control` is the
+   * pressed button's `event.currentTarget`.
+   */
+  runRow: (id: string, row: string, control: EventTarget | null) => void;
+  /** Open the `⋮` menu under its own button, which arrives as the press's `event.currentTarget`. */
+  overflowRow: (key: string, opener: EventTarget | null) => void;
   /** The rename input's three moments. */
   editInput: (value: string) => void;
   editCommit: () => void;
@@ -221,7 +225,7 @@ export interface OutlineSurfaceHandle {
 }
 
 /** The scope the document reads: the projection, plus everything its controls can call. */
-interface OutlineScope extends Record<string, unknown>, OutlineValues, OutlineActions {}
+interface OutlineScope extends OutlineValues, OutlineActions {}
 
 /** Write a projection into the scope. */
 function project(scope: OutlineScope, values: OutlineValues): void {
@@ -236,8 +240,8 @@ function project(scope: OutlineScope, values: OutlineValues): void {
 
 /** The `part` a node's definition carries, or "" for a text node or an unmarked element. */
 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 : "";
 }
 
 /**
@@ -253,7 +257,7 @@ export function mountOutlineSurface(
   values: OutlineValues,
   actions: OutlineActions,
 ): OutlineSurfaceHandle {
-  const scope = reactive<OutlineScope>({
+  const scope: OutlineScope = reactive<OutlineScope>({
     contextMenu: actions.contextMenu,
     current: "",
     editCancel: actions.editCancel,
@@ -278,7 +282,7 @@ export function mountOutlineSurface(
     treeReady: actions.treeReady,
     typeahead: actions.typeahead,
     view: "empty",
-  }) as OutlineScope;
+  });
   project(scope, values);
 
   let mounted: SurfaceHandle | null = null;
@@ -290,12 +294,15 @@ export function mountOutlineSurface(
   const ready = mountSurface("panel-outline", scope, container, {
     onNodeCreated: (element, _path, def) => {
       /* A text node carries no `part`, so narrowing and asking are the same question — asked once,
-         rather than as a guard clause whose only reachable answer is the one below. */
-      const part = element instanceof HTMLElement ? partOf(def) : "";
-      if (part === "tree") {
-        actions.treeReady(element as HTMLElement);
-      } else if (part === "title-input") {
-        actions.editReady(element as HTMLElement);
+         as the condition around the lookup rather than as a guard clause whose only reachable
+         answer is the one below. */
+      if (element instanceof HTMLElement) {
+        const part = partOf(def);
+        if (part === "tree") {
+          actions.treeReady(element);
+        } else if (part === "title-input") {
+          actions.editReady(element);
+        }
       }
     },
   }).then((surface) => {
@@ -312,8 +319,7 @@ export function mountOutlineSurface(
        mount racing the first. Once mounted, the question is whether the root is still where it was
        put: a Navigator that painted another panel, or the stylebook's own catalogue, cleared this
        document out from under it. */
-    connected: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    connected: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();

package/src/surfaces/panel-page.ts

@@ -26,16 +26,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import pagePanelDoc from "./panel-page.json";
-import type { JxDocument } from "@jxsuite/schema/types";
-import type { SurfaceHandle } from "../ui/surface";
+import type { SurfaceHandle, SurfaceOption } from "../ui/surface";
 
-registerSurface("panel-page", pagePanelDoc as unknown as JxDocument);
-
-/** One choice in a row's picker, or in the add form's tag picker. */
-export interface PageChoice {
-  value: string;
-  label: string;
-}
+registerSurface("panel-page", pagePanelDoc);
 
 /**
  * One row of one section, as the document reads it.
@@ -49,7 +42,7 @@ export interface PageChoice {
  * a screenshot region and `ui/regions.ts`'s `field:<prop>` grammar see. A collection whose schema
  * declares a `layout` property would otherwise share an identity with the Layout picker.
  */
-export interface PageRow extends Record<string, unknown> {
+export interface PageRow {
   /** The row's identity: the repeater's key, and the argument every action is given. */
   key: string;
   /** The name on `data-prop`. */
@@ -72,7 +65,7 @@ export interface PageRow extends Record<string, unknown> {
   /** A text row's placeholder. Empty draws none. */
   placeholder: string;
   /** A picker's rows, in the order they are offered. Empty on every other kind. */
-  options: PageChoice[];
+  options: SurfaceOption[];
   /** A sentence under the control — an empty collection, or a listing that failed. */
   note: string;
   /** Whether {@link PageRow.note} has anything in it; `$switch` is the document's conditional. */
@@ -84,7 +77,7 @@ export interface PageRow extends Record<string, unknown> {
 }
 
 /** One band of the panel: a heading, and the rows under it. */
-export interface PageSection extends Record<string, unknown> {
+export interface PageSection {
   /** The repeater's key, and the `data-section` a test or a shot addresses the band by. */
   key: string;
   /** The heading, already carrying the collection's name where there is one. */
@@ -95,7 +88,7 @@ export interface PageSection extends Record<string, unknown> {
 }
 
 /** One `$head` entry no structured control owns, as the list draws it. */
-export interface PageTagRow extends Record<string, unknown> {
+export interface PageTagRow {
   /** Unique within one projection — the repeater's key, and what Remove hands back. */
   key: string;
   /** The entry as markup, e.g. `<meta name="author">`. */
@@ -120,7 +113,7 @@ export interface PagePanelView {
   addAttr: string;
   addValue: string;
   /** The element names the add form offers. */
-  tagOptions: PageChoice[];
+  tagOptions: SurfaceOption[];
 }
 
 /**
@@ -142,8 +135,8 @@ export interface PagePanelActions {
   setChoice: (key: string, value: string) => void;
   /** Open the OS file picker for a media row and assign what comes back. */
   upload: (key: string) => void;
-  /** Open the media browser under the button that was pressed. */
-  browse: (key: string, anchor: unknown) => void;
+  /** Open the media browser under the button that was pressed — the press's `event.currentTarget`. */
+  browse: (key: string, anchor: EventTarget | null) => void;
   /** Run the `document.openSeo` command — the door to Search appearance. */
   openSeo: () => void;
   /** Take one custom `$head` entry away. */
@@ -159,7 +152,7 @@ export interface PagePanelActions {
 }
 
 /** The scope the document reads: the projection, plus everything a control can ask for. */
-interface PagePanelScope extends Record<string, unknown>, PagePanelView, PagePanelActions {}
+interface PagePanelScope extends PagePanelView, PagePanelActions {}
 
 /** Write a projection into the scope. Assignment by assignment, so an unchanged field is inert. */
 function project(scope: PagePanelScope, view: PagePanelView): void {
@@ -223,7 +216,7 @@ export function renderPagePanelSurface(
   }
   existing?.handle?.dispose();
   host.textContent = "";
-  const scope = reactive({ ...emptyView(), ...actions }) as PagePanelScope;
+  const scope: PagePanelScope = reactive<PagePanelScope>({ ...emptyView(), ...actions });
   project(scope, view);
   const record: Mounted = { handle: null, scope };
   mounts.set(host, record);

package/src/surfaces/panel-problems.ts

@@ -25,10 +25,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import problemsDoc from "./panel-problems.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-problems", problemsDoc as unknown as JxDocument);
+registerSurface("panel-problems", problemsDoc);
 
 /** One problem, as the document draws it. Every field is a value: no records, no closures. */
 export interface ProblemRowView {
@@ -87,7 +86,7 @@ export interface ProblemsSurfaceHandle {
 }
 
 /** The scope the document reads: the projection, and the four things a row can ask for. */
-interface ProblemsScope extends Record<string, unknown> {
+interface ProblemsScope {
   hasProblems: boolean;
   clearLabel: string;
   groups: ProblemGroupView[];
@@ -117,7 +116,7 @@ export function mountProblemsSurface(
   values: ProblemsValues,
   actions: ProblemsActions,
 ): ProblemsSurfaceHandle {
-  const scope = reactive<ProblemsScope>({
+  const scope: ProblemsScope = reactive<ProblemsScope>({
     clearAll: actions.clearAll,
     clearLabel: "",
     dismissRow: actions.dismissRow,
@@ -125,7 +124,7 @@ export function mountProblemsSurface(
     hasProblems: false,
     openPath: actions.openPath,
     runAction: actions.runAction,
-  }) as ProblemsScope;
+  });
   project(scope, values);
 
   let mounted: SurfaceHandle | null = null;
@@ -143,8 +142,7 @@ export function mountProblemsSurface(
        answer is simply whether this handle is still wanted. Once mounted, the question is whether
        the root is still where it was put: a dock that repainted with another tab selected, or one
        that collapsed, had the panel body emptied out from under it. */
-    connected: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    connected: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();

package/src/surfaces/panel-signals.ts

@@ -32,27 +32,15 @@
  * @docs studio/logic/data
  */
 
+import { isJsonObject, isString } from "@jxsuite/schema/guards";
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import signalsDoc from "./panel-signals.json";
-import type { JxDocument } from "@jxsuite/schema/types";
+import type { JsonObject, JxElement } from "@jxsuite/schema/types";
 import type { JxScope } from "@jxsuite/runtime/types";
-import type { SurfaceHandle } from "../ui/surface";
+import type { SurfaceHandle, SurfaceOption, SurfaceOptionGroup } from "../ui/surface";
 
-registerSurface("panel-signals", signalsDoc as unknown as JxDocument);
-
-/** One row of a picker, as `jx-select` reads it. */
-export interface SignalOption {
-  value: string;
-  label: string;
-}
-
-/** A named run of picker rows. `jx-select` draws both halves of a group's delimiter. */
-export interface SignalOptionGroup {
-  id: string;
-  label: string;
-  rows: SignalOption[];
-}
+registerSurface("panel-signals", signalsDoc);
 
 /** One chip of the basic parameter editor. */
 export interface SignalChipView {
@@ -158,7 +146,7 @@ export interface SignalFieldView {
   error: string;
   hasError: boolean;
   checked: boolean;
-  options: SignalOption[];
+  options: SurfaceOption[];
   /** Which island this host is for — `expression`, `statements`, `media` or `schema`. */
   slot: string;
   chips: SignalChipView[];
@@ -209,8 +197,8 @@ export interface SignalsView {
   listState: "listed" | "empty";
   emptyMessage: string;
   categories: SignalCategoryView[];
-  addOptions: SignalOption[];
-  addGroups: SignalOptionGroup[];
+  addOptions: SurfaceOption[];
+  addGroups: SurfaceOptionGroup[];
   /** What the add picker holds. Always `""` at rest — see {@link SignalsActions.addSignal}. */
   addValue: string;
 }
@@ -262,7 +250,7 @@ export interface SignalsSurfaceHandle {
   dispose: () => void;
 }
 
-interface SignalsScope extends Record<string, unknown>, SignalsView, SignalsActions {}
+interface SignalsScope extends SignalsView, SignalsActions {}
 
 /** One island's host, and what it is a host for. */
 interface IslandRecord {
@@ -272,23 +260,22 @@ interface IslandRecord {
 }
 
 /** The `part` a node was authored with, or `""` — the only thing this adapter asks about a node. */
-function partOf(def: unknown): string {
-  const attributes = (def as { attributes?: Record<string, unknown> } | null)?.attributes;
-  const part = attributes?.["part"];
-  return typeof part === "string" ? part : "";
+function partOf(def: JxElement | string): string {
+  const part = isString(def) ? undefined : def.attributes?.["part"];
+  return isString(part) ? part : "";
 }
 
 /** The `$map` item a node was rendered inside, if it was rendered inside one. */
-function mapItem(state: JxScope | undefined): Record<string, unknown> | null {
-  const map = state?.["$map"] as { item?: unknown } | undefined;
-  const item = map?.item;
-  return item !== null && typeof item === "object" ? (item as Record<string, unknown>) : null;
+function mapItem(state: JxScope | undefined): JsonObject | null {
+  const map = state?.["$map"];
+  const item = isJsonObject(map) ? map["item"] : undefined;
+  return isJsonObject(item) ? item : null;
 }
 
 /** A string field off a `$map` item, or `""`. */
-function itemString(item: Record<string, unknown> | null, field: string): string {
+function itemString(item: JsonObject | null, field: string): string {
   const value = item?.[field];
-  return typeof value === "string" ? value : "";
+  return isString(value) ? value : "";
 }
 
 /** The scope's starting shape, before the first projection lands on it. */
@@ -332,7 +319,7 @@ export function mountSignalsSurface(
   actions: SignalsActions,
   paint: SignalIslandPainter,
 ): SignalsSurfaceHandle {
-  const scope = reactive<SignalsScope>({
+  const scope: SignalsScope = reactive<SignalsScope>({
     ...emptyView(),
     ...actions,
     /* The picker never rests on what was picked. A controlled input is authoritative only while
@@ -346,7 +333,7 @@ export function mountSignalsSurface(
       actions.addSignal(type);
       scope.addValue = "";
     },
-  }) as SignalsScope;
+  });
   project(scope, view);
 
   /**
@@ -424,8 +411,7 @@ export function mountSignalsSurface(
        whether this handle is still wanted — answering no would start a second mount racing the
        first. Once mounted, the question is whether the root is still where it was put: a Navigator
        that painted another panel cleared this document out from under it. */
-    attached: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    attached: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();

package/src/surfaces/panel-stylebook-layers.ts

@@ -26,10 +26,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import stylebookLayersDoc from "./panel-stylebook-layers.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-stylebook-layers", stylebookLayersDoc as unknown as JxDocument);
+registerSurface("panel-stylebook-layers", stylebookLayersDoc);
 
 /**
  * One line of the catalogue, as the document draws it. Every field is a value: no records, no
@@ -91,8 +90,7 @@ export interface StylebookLayersSurfaceHandle {
 }
 
 /** The scope the document reads: the projection, plus the one thing a row can ask for. */
-interface StylebookLayersScope
-  extends Record<string, unknown>, StylebookLayersValues, StylebookLayersActions {}
+interface StylebookLayersScope extends StylebookLayersValues, StylebookLayersActions {}
 
 /** Write a projection into the scope. */
 function project(scope: StylebookLayersScope, values: StylebookLayersValues): void {
@@ -116,13 +114,13 @@ export function mountStylebookLayersSurface(
   values: StylebookLayersValues,
   actions: StylebookLayersActions,
 ): StylebookLayersSurfaceHandle {
-  const scope = reactive<StylebookLayersScope>({
+  const scope: StylebookLayersScope = reactive<StylebookLayersScope>({
     hasVariables: false,
     rows: [],
     selectRow: actions.selectRow,
     tab: "elements",
     variables: [],
-  }) as StylebookLayersScope;
+  });
   project(scope, values);
 
   let mounted: SurfaceHandle | null = null;
@@ -141,8 +139,7 @@ export function mountStylebookLayersSurface(
        mount racing the first. Once mounted, the question is whether the root is still where it was
        put: a Navigator that painted another panel, or the Outline's own lit branch, cleared this
        document out from under it. */
-    connected: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    connected: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();