@jxsuite/studio 6.1.1 → 8.0.0

package/src/surfaces/pane-context.json

@@ -7,7 +7,7 @@
     "part": "chrome"
   },
   "style": {
-    "$description": "The `.pc-*` rules of `styles/canvas.css`, keyed on `part` and carried here, plus `.jx-collab-banner` from `styles/shell.css` — the banner rides in this band and the rule rides with it. Three token repairs travel with them, the shape `surfaces/git-panel.json` describes: `--spectrum-font-size-75` and `--spectrum-font-size-50` resolved only inside `<sp-theme>` and a document mounts outside it, so every rule reading one would silently have taken its px fallback; they are `--jx-text-md` (12px) and `--jx-text-sm` (11px) here, at the same values. Four rules are DELETED rather than moved because the kit already draws them: `.pc-derive-trigger`'s hand-built 22×20 box and its hover are `jx-action-button` quiet, `.pc-preview-toggle[selected]`'s four Spectrum custom-property overrides are the `emphasized` prop, and `.pc-ctx-manage:hover`'s underline is the only half of that rule worth keeping. The one rule ADDED is `pointer-events: auto` on the band, the pod and the popovers: `.pane-chrome` is `pointer-events: none` and gave it to its direct children through `.pane-chrome > *`, which a document root with `display: contents` is not — so the three surfaces that take the pointer say so themselves, which is also the honest place for it.",
+    "$description": "The `.pc-*` rules of `styles/canvas.css`, keyed on `part` and carried here, plus `.jx-collab-banner` from `styles/shell.css` — the banner rides in this band and the rule rides with it. Three token repairs travel with them, all of one shape: `--spectrum-font-size-75` and `--spectrum-font-size-50` resolved only inside `<sp-theme>` and a document mounts outside it, so every rule reading one would silently have taken its px fallback; they are `--jx-text-md` (12px) and `--jx-text-sm` (11px) here, at the same values. Four rules are DELETED rather than moved because the kit already draws them: `.pc-derive-trigger`'s hand-built 22×20 box and its hover are `jx-action-button` quiet, `.pc-preview-toggle[selected]`'s four Spectrum custom-property overrides are the `emphasized` prop, and `.pc-ctx-manage:hover`'s underline is the only half of that rule worth keeping. The one rule ADDED is `pointer-events: auto` on the band, the pod and the popovers: `.pane-chrome` is `pointer-events: none` and gave it to its direct children through `.pane-chrome > *`, which a document root with `display: contents` is not — so the three surfaces that take the pointer say so themselves, which is also the honest place for it.",
     "display": "contents",
     "& [part=\"band\"]": {
       "$description": "The pane's top band: the bar plus the standing statements that must be readable before the first keystroke. One element so the adapter can MEASURE what the stage has to clear — a banner's height is its wrapped text, which only layout knows.",
@@ -32,6 +32,10 @@
       "alignItems": "center",
       "minWidth": "0"
     },
+    "& [part=\"back\"]": {
+      "flexShrink": "0",
+      "marginInlineEnd": "var(--jx-space-2)"
+    },
     "& [part=\"axis\"]": {
       "display": "flex",
       "alignItems": "center",
@@ -214,6 +218,54 @@
                 "part": "spacer"
               },
               "children": [
+                {
+                  "$description": "Back to the workspace home, in a workspace that draws no tab strip (Media, Styles, Publish): the way out of a view opened beside the home — a media file, a comparison, `project.json` as Code — with the destination named, because there is no chip to click and no close button to press. It leads the bar so it sits where the strip's chips would have been. Escape runs the same command (`pane.backToHome`) wherever no text field or code editor owns the key.",
+                  "tagName": "div",
+                  "attributes": {
+                    "part": "back-slot",
+                    "role": "none"
+                  },
+                  "style": {
+                    "display": "contents"
+                  },
+                  "$switch": {
+                    "$ref": "#/state/backState"
+                  },
+                  "cases": {
+                    "shown": {
+                      "tagName": "jx-action-button",
+                      "attributes": {
+                        "part": "back"
+                      },
+                      "$props": {
+                        "size": "sm",
+                        "quiet": true,
+                        "icon": "arrow-left",
+                        "hint": {
+                          "$ref": "#/state/backHint"
+                        }
+                      },
+                      "onclick": {
+                        "$prototype": "Function",
+                        "body": [
+                          {
+                            "operator": "call",
+                            "target": {
+                              "$ref": "#/state/goBack"
+                            },
+                            "value": []
+                          }
+                        ]
+                      },
+                      "children": [
+                        {
+                          "tagName": "span",
+                          "textContent": "${state.backLabel}"
+                        }
+                      ]
+                    }
+                  }
+                },
                 {
                   "tagName": "div",
                   "attributes": {
@@ -236,8 +288,8 @@
                         "size": "sm",
                         "quiet": true,
                         "icon": "arrows-clockwise",
-                        "label": "Show something beside this pane",
-                        "hint": "Show something beside this pane",
+                        "label": "Show code, diff or layout beside",
+                        "hint": "Show this document's code, diff, layout or another breakpoint beside it",
                         "haspopup": "menu"
                       },
                       "onclick": {
@@ -525,43 +577,104 @@
                     {
                       "tagName": "div",
                       "attributes": {
-                        "part": "axis",
-                        "data-axis": "context"
+                        "part": "context-slot",
+                        "role": "none"
                       },
-                      "children": [
-                        {
-                          "tagName": "span",
-                          "attributes": {
-                            "part": "axis-label"
-                          },
-                          "textContent": "Context"
-                        },
-                        {
+                      "style": {
+                        "display": "contents"
+                      },
+                      "$switch": {
+                        "$ref": "#/state/contextState"
+                      },
+                      "cases": {
+                        "shown": {
                           "tagName": "div",
                           "attributes": {
-                            "part": "resolving-slot",
-                            "role": "none"
-                          },
-                          "style": {
-                            "display": "contents"
-                          },
-                          "$switch": {
-                            "$ref": "#/state/resolvingState"
+                            "part": "axis",
+                            "data-axis": "context"
                           },
-                          "cases": {
-                            "shown": {
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "attributes": {
+                                "part": "axis-label"
+                              },
+                              "textContent": "Context"
+                            },
+                            {
+                              "tagName": "div",
+                              "attributes": {
+                                "part": "resolving-slot",
+                                "role": "none"
+                              },
+                              "style": {
+                                "display": "contents"
+                              },
+                              "$switch": {
+                                "$ref": "#/state/resolvingState"
+                              },
+                              "cases": {
+                                "shown": {
+                                  "tagName": "jx-action-button",
+                                  "attributes": {
+                                    "part": "resolving-trigger"
+                                  },
+                                  "$props": {
+                                    "size": "sm",
+                                    "quiet": true,
+                                    "haspopup": "dialog",
+                                    "expanded": {
+                                      "$ref": "#/state/resolvingOpen"
+                                    },
+                                    "hint": "The values this document is being rendered with"
+                                  },
+                                  "onclick": {
+                                    "$prototype": "Function",
+                                    "body": [
+                                      {
+                                        "operator": "call",
+                                        "target": {
+                                          "$ref": "#/state/openResolving"
+                                        },
+                                        "value": [
+                                          {
+                                            "$ref": "event#/currentTarget"
+                                          }
+                                        ]
+                                      }
+                                    ]
+                                  },
+                                  "children": [
+                                    {
+                                      "tagName": "span",
+                                      "textContent": "${state.resolvingLabel}"
+                                    },
+                                    {
+                                      "tagName": "jx-icon",
+                                      "attributes": {
+                                        "part": "resolving-trigger-caret"
+                                      },
+                                      "$props": {
+                                        "name": "caret-down"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            },
+                            {
                               "tagName": "jx-action-button",
                               "attributes": {
-                                "part": "resolving-trigger"
+                                "part": "context-trigger"
                               },
                               "$props": {
                                 "size": "sm",
                                 "quiet": true,
                                 "haspopup": "dialog",
                                 "expanded": {
-                                  "$ref": "#/state/resolvingOpen"
+                                  "$ref": "#/state/contextOpen"
                                 },
-                                "hint": "The values this document is being rendered with"
+                                "hint": "What this document is being rendered with"
                               },
                               "onclick": {
                                 "$prototype": "Function",
@@ -569,7 +682,7 @@
                                   {
                                     "operator": "call",
                                     "target": {
-                                      "$ref": "#/state/openResolving"
+                                      "$ref": "#/state/openContext"
                                     },
                                     "value": [
                                       {
@@ -582,12 +695,12 @@
                               "children": [
                                 {
                                   "tagName": "span",
-                                  "textContent": "${state.resolvingLabel}"
+                                  "textContent": "${state.contextSummary}"
                                 },
                                 {
                                   "tagName": "jx-icon",
                                   "attributes": {
-                                    "part": "resolving-trigger-caret"
+                                    "part": "context-trigger-caret"
                                   },
                                   "$props": {
                                     "name": "caret-down"
@@ -595,55 +708,9 @@
                                 }
                               ]
                             }
-                          }
-                        },
-                        {
-                          "tagName": "jx-action-button",
-                          "attributes": {
-                            "part": "context-trigger"
-                          },
-                          "$props": {
-                            "size": "sm",
-                            "quiet": true,
-                            "haspopup": "dialog",
-                            "expanded": {
-                              "$ref": "#/state/contextOpen"
-                            },
-                            "hint": "What this document is being rendered with"
-                          },
-                          "onclick": {
-                            "$prototype": "Function",
-                            "body": [
-                              {
-                                "operator": "call",
-                                "target": {
-                                  "$ref": "#/state/openContext"
-                                },
-                                "value": [
-                                  {
-                                    "$ref": "event#/currentTarget"
-                                  }
-                                ]
-                              }
-                            ]
-                          },
-                          "children": [
-                            {
-                              "tagName": "span",
-                              "textContent": "${state.contextSummary}"
-                            },
-                            {
-                              "tagName": "jx-icon",
-                              "attributes": {
-                                "part": "context-trigger-caret"
-                              },
-                              "$props": {
-                                "name": "caret-down"
-                              }
-                            }
                           ]
                         }
-                      ]
+                      }
                     },
                     {
                       "tagName": "div",

package/src/surfaces/pane-context.ts

@@ -28,21 +28,17 @@
  * @docs studio/interface/tabs
  */
 
-import { close as closePopover, openAt } from "@jxsuite/ui/behaviors/popover";
+import { close, openAt } from "@jxsuite/ui/behaviors/popover";
+import { isString } from "@jxsuite/schema/guards";
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import { rectOf } from "../utils/geometry";
 import paneContextDoc from "./pane-context.json";
-import type { JxDocument, JxElement } from "@jxsuite/schema/types";
-import type { SurfaceHandle } from "../ui/surface";
+import type { JxElement } from "@jxsuite/schema/types";
+import type { SurfaceHandle, SurfaceOption } from "../ui/surface";
+import type { ViewportPoint } from "./menu";
 
-registerSurface("pane-context", paneContextDoc as unknown as JxDocument);
-
-/** One row of a `jx-select`: the value it writes and the word it prints. */
-export interface PaneContextOption {
-  value: string;
-  label: string;
-}
+registerSurface("pane-context", paneContextDoc);
 
 /**
  * One segment of a radio group — a size, a scheme, a view, a language.
@@ -74,7 +70,7 @@ export interface PaneContextParam {
   name: string;
   label: string;
   value: string;
-  options: PaneContextOption[];
+  options: SurfaceOption[];
 }
 
 /** One component test prop: a field, and the region id the screenshot pipeline addresses it by. */
@@ -101,6 +97,15 @@ export interface PaneContextView {
   /** `full` draws the three axes; `lens` draws the rendering context as a read-only summary. */
   barMode: "full" | "lens";
   presetState: "shown" | "hidden";
+  /**
+   * The Back control, in a workspace that draws no tab strip (Media, Styles, Publish): shown over a
+   * view opened beside the workspace's home, naming where it leads
+   * (`workspace/workspace-back.ts`).
+   */
+  backState: "shown" | "hidden";
+  /** "Back to Media", "Back to Variables". */
+  backLabel: string;
+  backHint: string;
   bannerState: "shown" | "hidden";
   /** The lens's stated rendering context — "Tablet · français". */
   summary: string;
@@ -108,10 +113,15 @@ export interface PaneContextView {
   editorMode: "static" | "picker";
   editorLabel: string;
   editorValue: string;
-  editorOptions: PaneContextOption[];
+  editorOptions: SurfaceOption[];
 
   viewState: "shown" | "hidden";
   views: PaneContextChoice[];
+  /**
+   * Whether the Context axis (size, scheme, language, layout) is drawn. Hidden for a tab nothing is
+   * rendered under: a workspace home draws its own surface, not the document at a breakpoint.
+   */
+  contextState: "shown" | "hidden";
   previewState: "shown" | "hidden";
   previewOn: boolean;
   previewHint: string;
@@ -143,12 +153,14 @@ export interface PaneContextView {
   zoomLabel: string;
   fitState: "shown" | "hidden";
   fitValue: string;
-  fitOptions: PaneContextOption[];
+  fitOptions: SurfaceOption[];
 }
 
 /** What a control can ask the pane to do. Every one of them is a decision the flow owns. */
 export interface PaneContextActions {
   openPresetMenu: (anchor: HTMLElement) => void;
+  /** Leave the view for the workspace home (`pane.backToHome`). */
+  goBack: () => void;
   chooseEditor: (kind: string) => void;
   chooseView: (view: string) => void;
   togglePreview: () => void;
@@ -205,8 +217,7 @@ interface PopoverState {
   resolvingOpen: boolean;
 }
 
-interface PaneContextScope
-  extends Record<string, unknown>, PaneContextView, PaneContextActions, PopoverState {
+interface PaneContextScope extends PaneContextView, PaneContextActions, PopoverState {
   /** The two panel doors the document calls, which the mount owns rather than the flow. */
   openContext: (anchor: HTMLElement) => void;
   openResolving: (anchor: HTMLElement) => void;
@@ -221,6 +232,9 @@ function project(scope: PaneContextScope, view: PaneContextView): void {
   scope.zoomRegion = view.zoomRegion;
   scope.barMode = view.barMode;
   scope.presetState = view.presetState;
+  scope.backState = view.backState;
+  scope.backLabel = view.backLabel;
+  scope.backHint = view.backHint;
   scope.bannerState = view.bannerState;
   scope.summary = view.summary;
   scope.editorMode = view.editorMode;
@@ -228,6 +242,7 @@ function project(scope: PaneContextScope, view: PaneContextView): void {
   scope.editorValue = view.editorValue;
   scope.editorOptions = view.editorOptions;
   scope.viewState = view.viewState;
+  scope.contextState = view.contextState;
   scope.views = view.views;
   scope.previewState = view.previewState;
   scope.previewOn = view.previewOn;
@@ -259,9 +274,13 @@ function project(scope: PaneContextScope, view: PaneContextView): void {
 /** The projection a pane's chrome starts from — a bar with nothing in it yet. */
 export function emptyPaneContextView(): PaneContextView {
   return {
+    backHint: "",
+    backLabel: "",
+    backState: "hidden",
     bannerState: "hidden",
     barMode: "full",
     contextRegion: "",
+    contextState: "shown",
     contextSummary: "Base",
     editorLabel: "",
     editorMode: "static",
@@ -307,8 +326,8 @@ export function emptyPaneContextView(): PaneContextView {
  * undefined at that moment and the two panels would both be filed under the same empty key.
  */
 function attrOf(def: JxElement | string, name: string): string {
-  const value = typeof def === "string" ? undefined : def.attributes?.[name];
-  return typeof value === "string" ? value : "";
+  const value = isString(def) ? undefined : def.attributes?.[name];
+  return isString(value) ? value : "";
 }
 
 /**
@@ -325,7 +344,7 @@ function attrOf(def: JxElement | string, name: string): string {
  * platform against the trigger it was opened from (ui.md §6) and these coordinates are ignored;
  * they stand for the engines that cannot.
  */
-function placeBelow(anchor: HTMLElement, panel: HTMLElement | null): { x: number; y: number } {
+function placeBelow(anchor: HTMLElement, panel: HTMLElement | null): ViewportPoint {
   const box = rectOf(anchor);
   const width = panel ? rectOf(panel).width : 0;
   const right = Math.max(0, box.right - width);
@@ -352,7 +371,7 @@ export function mountPaneContextSurface(
      module finds an invoker from a panel — so two panes mounting this surface under one id would
      hand the second pane's trigger the first pane's panel. */
   const uid = `pane-context-${paneId}`;
-  const scope = reactive<PaneContextScope>({
+  const scope: PaneContextScope = reactive<PaneContextScope>({
     ...emptyPaneContextView(),
     ...actions,
     contextOpen: false,
@@ -369,7 +388,7 @@ export function mountPaneContextSurface(
     resolvingPopoverId: `${uid}-resolving`,
     resolvingX: 0,
     resolvingY: 0,
-  }) as PaneContextScope;
+  });
   project(scope, view);
 
   const nodes = new Map<string, HTMLElement>();
@@ -378,7 +397,7 @@ export function mountPaneContextSurface(
 
   /** The panel a `data-popover` key names, once the document has drawn it. */
   const panelOf = (kind: "context" | "resolving"): PopoverElement | null =>
-    (nodes.get(`popover:${kind}`) as PopoverElement | undefined) ?? null;
+    nodes.get(`popover:${kind}`) ?? null;
 
   /**
    * Show a panel from its trigger, positioning it before and after the show.
@@ -391,7 +410,7 @@ export function mountPaneContextSurface(
     if (!panel) {
       return;
     }
-    const write = (at: { x: number; y: number }): void => {
+    const write = (at: ViewportPoint): void => {
       if (kind === "context") {
         scope.contextX = at.x;
         scope.contextY = at.y;
@@ -418,7 +437,7 @@ export function mountPaneContextSurface(
     }
     const panel = panelOf(kind);
     if (panel) {
-      closePopover(panel);
+      close(panel);
     }
   };
 
@@ -454,7 +473,7 @@ export function mountPaneContextSurface(
              `hidePopover()` queues its toggle: `canvas.setResolvingOpen { open: false }` has to be
              true of `isResolvingOpen()` on the line after it, not a task later. */
           element.addEventListener("toggle", (event) => {
-            const open = (event as Event & { newState?: string }).newState === "open";
+            const open = event.newState === "open";
             if (kind === "context") {
               scope.contextOpen = open;
             } else {
@@ -483,7 +502,7 @@ export function mountPaneContextSurface(
     },
     /* A mount still in flight has nothing in the host to ask about, and answering "no" would make
        the next repaint tear down the mount it is waiting for and start a second one. */
-    connected: () => !disposed && (mounted === null || (mounted.root as Node).parentNode === host),
+    connected: () => !disposed && (mounted === null || mounted.root.parentNode === host),
     dispose() {
       disposed = true;
       hidePanel("context");

package/src/surfaces/pane-grid.ts

@@ -23,14 +23,15 @@
  * @docs studio/interface
  */
 
+import { isJsonObject, isString } from "@jxsuite/schema/guards";
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import paneGridDoc from "./pane-grid.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("pane-grid", paneGridDoc as unknown as JxDocument);
+registerSurface("pane-grid", paneGridDoc);
 
 /**
  * The `part` a pane's CELL carries.
@@ -80,7 +81,7 @@ const CELL_PARTS: ReadonlyMap<string, PaneCellPart> = new Map([
  * Every field is a finished value. The document asks no question about a pane — not which index it
  * is at, not how many there are — so a projection cannot disagree with what is drawn.
  */
-export interface PaneGridRow extends Record<string, unknown> {
+export interface PaneGridRow {
   /** The pane id. The repeater's key, and what every action is addressed with. */
   id: string;
   /** `"shown"` for every row but the first. The `$switch` the leading splitter hangs off. */
@@ -165,7 +166,7 @@ export interface PaneGridSurface {
 }
 
 /** The scope `pane-grid.json` reads. */
-interface PaneGridScope extends Record<string, unknown>, PaneGridDragState {
+interface PaneGridScope extends PaneGridDragState {
   rows: PaneGridRow[];
   /** `jx-split`'s `value`. */
   paneSplit: number;
@@ -180,8 +181,8 @@ interface PaneGridScope extends Record<string, unknown>, PaneGridDragState {
 
 /** 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 : "";
 }
 
 /**
@@ -192,8 +193,10 @@ function partOf(def: JxElement | string): string {
  * object the projection put in `rows`.
  */
 function paneOf(state: JxScope | undefined): string {
-  const row = (state?.["$map"] as { item?: { id?: unknown } } | undefined)?.item;
-  return typeof row?.id === "string" ? row.id : "";
+  const map = state?.["$map"];
+  const row = isJsonObject(map) ? map["item"] : undefined;
+  const id = isJsonObject(row) ? row["id"] : undefined;
+  return isString(id) ? id : "";
 }
 
 /**
@@ -215,7 +218,7 @@ export function mountPaneGridSurface(
   actions: PaneGridActions,
 ): PaneGridSurface {
   host.replaceChildren();
-  const scope = reactive<PaneGridScope>({
+  const scope: PaneGridScope = reactive<PaneGridScope>({
     armed: false,
     edgePane: "",
     move: actions.move,
@@ -226,7 +229,7 @@ export function mountPaneGridSurface(
     splitGap: split.gap,
     splitMax: split.max,
     splitMin: split.min,
-  }) as PaneGridScope;
+  });
 
   let mounted: SurfaceHandle | null = null;
   let disposed = false;
@@ -239,6 +242,8 @@ export function mountPaneGridSurface(
     onNodeCreated: (element, _path, def, state) => {
       const cellPart = CELL_PARTS.get(partOf(def));
       if (cellPart) {
+        /* SAFETY: `pane-grid.json` declares no text children and no SVG, so every node carrying
+           one of the five cell parts is an HTML element the runtime created from a tagName. */
         actions.cellPart(paneOf(state), cellPart, element as HTMLElement);
       }
     },

package/src/surfaces/panel-activity.ts

@@ -31,10 +31,9 @@ import { effect, effectScope, reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import activityDoc from "./panel-activity.json";
 import type { EffectScope } from "@vue/reactivity";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-activity", activityDoc as unknown as JxDocument);
+registerSurface("panel-activity", activityDoc);
 
 /** One declared phase of an operation, as the surface reads it. */
 export interface ActivityStepView {
@@ -98,7 +97,7 @@ export interface ActivitySurfaceDeps {
 }
 
 /** The scope the document reads: the projection, flattened, beside the three callbacks. */
-interface ActivityScope extends Record<string, unknown> {
+interface ActivityScope {
   rows: ActivityRowView[];
   hasRows: boolean;
   hasFinished: boolean;
@@ -127,7 +126,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;
 }
 
 /**
@@ -142,7 +141,7 @@ export function mountActivitySurface(container: HTMLElement, deps: ActivitySurfa
   }
   disposeActivitySurface();
   _container = container;
-  const scope = reactive<ActivityScope>({
+  const scope: ActivityScope = reactive<ActivityScope>({
     cancel: deps.cancel,
     clearFinished: deps.clearFinished,
     clearLabel: "",
@@ -150,7 +149,7 @@ export function mountActivitySurface(container: HTMLElement, deps: ActivitySurfa
     hasRows: false,
     rows: [],
     toggleLog: deps.toggleLog,
-  }) as ActivityScope;
+  });
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {

package/src/surfaces/panel-data.ts

@@ -22,10 +22,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import dataTreeDoc from "./panel-data.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-data", dataTreeDoc as unknown as JxDocument);
+registerSurface("panel-data", dataTreeDoc);
 
 /**
  * One line of a value tree, as the document reads it.
@@ -69,7 +68,7 @@ export interface DataTreeActions {
 }
 
 /** The scope the document reads. */
-interface DataTreeScope extends Record<string, unknown>, DataTreeActions {
+interface DataTreeScope extends DataTreeActions {
   rows: DataTreeRow[];
 }
 
@@ -113,7 +112,7 @@ export function renderDataTreeSurface(
   }
   takeDown(host, existing);
   host.textContent = "";
-  const scope = reactive({ rows, showMore: actions.showMore }) as DataTreeScope;
+  const scope: DataTreeScope = reactive<DataTreeScope>({ rows, showMore: actions.showMore });
   const record: Mounted = { disposed: false, handle: null, scope };
   mounts.set(host, record);
   /* No race to arbitrate: a repaint arriving while this is in flight takes the branch above — a