@jxsuite/studio 9.0.0 → 10.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -60,16 +60,16 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^3.0.0",
-    "@jxsuite/ai": "^0.41.0",
-    "@jxsuite/collab": "^0.11.3",
-    "@jxsuite/create": "^1.4.1",
-    "@jxsuite/formulas": "^0.0.25",
-    "@jxsuite/markup": "^1.0.1",
-    "@jxsuite/protocol": "^5.0.0",
-    "@jxsuite/runtime": "^6.0.0",
-    "@jxsuite/schema": "^4.1.0",
-    "@jxsuite/site": "^2.2.1",
-    "@jxsuite/ui": "^0.8.1",
+    "@jxsuite/ai": "^0.41.1",
+    "@jxsuite/collab": "^0.11.4",
+    "@jxsuite/create": "^1.5.0",
+    "@jxsuite/formulas": "^0.0.26",
+    "@jxsuite/markup": "^1.0.2",
+    "@jxsuite/protocol": "^6.0.0",
+    "@jxsuite/runtime": "^6.0.1",
+    "@jxsuite/schema": "^5.0.0",
+    "@jxsuite/site": "^2.2.2",
+    "@jxsuite/ui": "^0.8.2",
     "@vue/reactivity": "3.5.44",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",

package/src/canvas/iframe-editable-root.ts

@@ -445,8 +445,9 @@ export function startEditableRoot(
    * something no caret can enter, so the caret went on blinking in the block clicked BEFORE, with
    * the component now selected in the editor and every keystroke still typed into that block.
    */
-  const onPointerDownCapture = (e: Event) => {
-    if (!editingAllowed()) {
+  const onPointerDownCapture = (e: PointerEvent) => {
+    // A secondary press asks for the element menu, not an edit: see `onMouseDownCapture`.
+    if (!editingAllowed() || e.button === 2) {
       return;
     }
     const target = e.target instanceof Element ? e.target : null;
@@ -478,6 +479,33 @@ export function startEditableRoot(
     }
   };
 
+  /**
+   * A secondary press outside the active block selects, it never starts an edit.
+   *
+   * The whole canvas is one `contenteditable`, and a right-button press places the caret where it
+   * lands, as a left one does. That caret activated the block through `selectionchange`, so every
+   * right-click on a block also entered inline editing: the bridge's edit start ran ahead of the
+   * menu's mount in the same task, which held the element menu back by hundreds of milliseconds on
+   * a real page, and the block was left in edit mode after the menu closed. Cancelling the press's
+   * default keeps the caret where it was; `contextmenu` still fires, so the menu is unaffected. The
+   * block being edited keeps its native press, because the caret placed there is what the native
+   * spelling and edit menu reads. A right-click elsewhere leaves that block, as a left click
+   * would.
+   */
+  const onMouseDownCapture = (e: MouseEvent) => {
+    if (e.button !== 2 || !editingAllowed()) {
+      return;
+    }
+    if (activeEl && e.target instanceof Node && activeEl.contains(e.target)) {
+      return;
+    }
+    e.preventDefault();
+    if (activeEl) {
+      deactivate();
+      doc.getSelection()?.removeAllRanges();
+    }
+  };
+
   /**
    * Reordering is the block action bar's drag handle, full stop. A `contenteditable` region is
    * natively draggable by its text, which would both fight text selection and move content behind
@@ -501,6 +529,7 @@ export function startEditableRoot(
   container.addEventListener("compositionend", onCompositionEnd);
   container.addEventListener("dragstart", onDragStart);
   doc.addEventListener("pointerdown", onPointerDownCapture, true);
+  doc.addEventListener("mousedown", onMouseDownCapture, true);
 
   return {
     capture: () => captureDocSelection(container, deps.isEditableBlock),
@@ -542,6 +571,7 @@ export function startEditableRoot(
       container.removeEventListener("compositionend", onCompositionEnd);
       container.removeEventListener("dragstart", onDragStart);
       doc.removeEventListener("pointerdown", onPointerDownCapture, true);
+      doc.removeEventListener("mousedown", onMouseDownCapture, true);
       // Deactivating commits, so the pending tick is cancelled rather than fired.
       deactivate();
     },

package/src/format/format-host.ts

@@ -217,7 +217,7 @@ async function shareProjectSchemas(
  */
 export function refreshExtensionUi(platform: Pick<StudioPlatform, "fetchProjectSchemas">): void {
   void shareProjectSchemas(platform);
-  // `installed` and `bundled` are per-project facts, so an install or a project switch can move
+  // `installed` is a per-project fact, so an install or a project switch can move
   // Them even when the shipped half has not changed.
   void loadExtensionCatalog();
   void import("../settings/extension-sections")

package/src/github/github-auth-status.ts

@@ -21,8 +21,8 @@ const STORAGE_KEY = "jx_github_token";
 /**
  * The GitHub OAuth app every Jx sign-in authorizes against: the browser's device flow in
  * `github-auth.ts`, and the desktop launcher's RFC 8252 loopback redirect
- * (`packages/desktop/src/github-signin.ts`). Here, in the module with no UI dependency, because the
- * launcher's main process imports it too.
+ * (`packages/desktop/src/backend/github-signin.ts`). Here, in the module with no UI dependency,
+ * because the launcher's main process imports it too.
  */
 export const GITHUB_OAUTH_CLIENT_ID = "Ov23liYVlMFpgjOEPXJH";
 

package/src/media/media-library.ts

@@ -67,6 +67,7 @@ import { dirName, previewFileSrc } from "../files/media-paths";
 import { forgetVersions } from "../files/asset-versions";
 import { loadMediaUsages, peekMediaUsages } from "../files/media-usage";
 import { onProjectMediaChange, projectMediaFiles } from "../ui/media-picker";
+import { openMenu } from "../surfaces/menu";
 import { openMediaTab } from "./media-open";
 import { factsLine, mediaStageFor, specimenOf, usageOf } from "./media-pane";
 import {
@@ -93,6 +94,7 @@ import type {
   MediaTileRow,
 } from "../surfaces/media-library";
 import type { MediaPickDialogHandle } from "../surfaces/media-pick-dialog";
+import type { MenuHandle, MenuRowProjection } from "../surfaces/menu";
 import type { PreviewObserver } from "../browse/library-preview";
 import type { Tab } from "../tabs/tab";
 import type { CanvasSurface } from "../canvas/canvas-surface";
@@ -788,11 +790,11 @@ function actionsFor(mount: LibraryMount) {
         activate(mount, selected);
       }
     },
+    contextMenu: (file: string, x: number, y: number) => showTileMenu(mount, file, x, y),
     copyRef: () => {
       const entry = selectedEntry(mount);
-      // `navigator.clipboard` is [SecureContext]: a plain-http host has none, whatever lib.dom says.
-      if (entry && "clipboard" in navigator) {
-        void navigator.clipboard.writeText(entry.ref);
+      if (entry) {
+        copySiteUrl(entry);
       }
     },
     dragOut: () => {
@@ -913,6 +915,74 @@ function actionsFor(mount: LibraryMount) {
 }
 
 /** Enter or a double-click: open the viewer, or in pick mode, use the file. */
+/** Put a file's site URL on the clipboard. */
+function copySiteUrl(entry: ProjectMediaFile): void {
+  // `navigator.clipboard` is [SecureContext]: a plain-http host has none, whatever lib.dom says.
+  if ("clipboard" in navigator) {
+    void navigator.clipboard.writeText(entry.ref);
+  }
+}
+
+/**
+ * The tile menu that is up, if any. One handle, because only one can be open: a second kit menu
+ * opened over the first is how two of them light-dismiss each other.
+ */
+let _tileMenu: MenuHandle | null = null;
+
+/**
+ * A right-click on a tile: select it, then offer the detail pane's actions at the pointer.
+ *
+ * The same four verbs as the detail pane's (studio.md §22.6), in the order the pane draws them, and
+ * each calls what the pane's control calls, so the menu cannot drift from the pane. Selecting first
+ * is what makes the pane describe the file the menu acts on, as a right-click on a row does in the
+ * Content workspace.
+ */
+function showTileMenu(mount: LibraryMount, file: string, x: number, y: number): void {
+  select(mount, file);
+  const entry = selectedEntry(mount);
+  if (!entry) {
+    return;
+  }
+  _tileMenu?.close();
+  const row = (
+    id: string,
+    title: string,
+    run: () => void,
+    extra: Partial<MenuRowProjection> = {},
+  ): MenuRowProjection => ({
+    destructive: false,
+    disabled: false,
+    dividerAbove: false,
+    id,
+    run,
+    title,
+    ...extra,
+  });
+  _tileMenu = openMenu({
+    label: `${entry.name} actions`,
+    onClosed: (handle) => {
+      if (_tileMenu === handle) {
+        _tileMenu = null;
+      }
+    },
+    origin: { x, y },
+    region: "media-tile",
+    rows: [
+      row("open", "Open in Viewer", () => openMediaTab(file)),
+      row("copy-url", "Copy Site URL", () => copySiteUrl(entry)),
+      row("replace", "Replace…", () => requestMediaReplace(file), { dividerAbove: true }),
+      row(
+        "delete",
+        "Delete",
+        () => {
+          void deleteMediaFile(file);
+        },
+        { destructive: true, dividerAbove: true },
+      ),
+    ],
+  });
+}
+
 function activate(mount: LibraryMount, file: string): void {
   if (mount.mode === "pick") {
     const entry = selectedEntry(mount);

package/src/packages/ensure-deps.ts

@@ -1,8 +1,8 @@
 /// <reference lib="dom" />
 /**
  * Ensure the active project's dependencies are installed before the editor loads. When the backend
- * reports node_modules is missing, run `bun install` behind a blocking progress modal so component
- * and format resolution see the real dependency tree. No-op on platforms without package support.
+ * reports node_modules is missing, install them behind a blocking progress modal so component and
+ * format resolution see the real dependency tree. No-op on platforms without package support.
  *
  * It REPORTS whether an install actually ran, because "format resolution sees the real dependency
  * tree" was only half true: project activation fetches the format registry before calling this, and
@@ -17,7 +17,7 @@ import { shouldInstallAutomation } from "../services/automation";
 
 export async function ensureDependenciesInstalled(): Promise<boolean> {
   // Automation/screenshot runs open projects read-only to drive the canvas — they must never mutate
-  // The project on disk (a `bun install` would litter node_modules/bun.lock into starter templates).
+  // The project on disk (an install would litter node_modules and a lockfile into starter templates).
   if (shouldInstallAutomation(location.search)) {
     return false;
   }
@@ -35,7 +35,7 @@ export async function ensureDependenciesInstalled(): Promise<boolean> {
     return false;
   }
   const progress = showProgressModal({
-    status: "Running bun install…",
+    status: "Installing dependencies…",
     title: "Installing dependencies",
   });
   try {
@@ -44,7 +44,7 @@ export async function ensureDependenciesInstalled(): Promise<boolean> {
       progress.done();
       return true;
     }
-    progress.fail(result.log ?? "bun install failed");
+    progress.fail(result.log ?? "Install failed");
   } catch (error) {
     progress.fail(error instanceof Error ? error.message : String(error));
   }

package/src/packages/pull-package-sync.ts

@@ -4,7 +4,7 @@
  * updates. The on-open @jxsuite update rewrites package.json and bun.lock without committing, so a
  * teammate pushing the same update makes a later `git pull` refuse to merge. Since those local
  * changes are machine-generated and reproducible, we discard them, pull, and re-run the package
- * sync (re-apply the update if the pulled project is still behind, or `bun install` if the pull
+ * sync (re-apply the update if the pulled project is still behind, or an install if the pull
  * brought it). Detection is state-based (git status + content comparison against `@{u}`), never git
  * stderr parsing, so it works identically across backends and locales.
  */
@@ -188,7 +188,7 @@ async function applyDiscard(plan: PackagePullPlan): Promise<void> {
 
 /**
  * Bring packages back in line after a pull that touched (or followed a discard of) package files:
- * re-apply the @jxsuite update if the pulled project is still behind, otherwise `bun install` so
+ * re-apply the @jxsuite update if the pulled project is still behind, otherwise an install so
  * node_modules matches the pulled lockfile. Never throws — a successful pull must not turn into an
  * error banner; failures surface through the progress modal.
  */
@@ -209,7 +209,7 @@ async function syncPackagesAfterPull(): Promise<void> {
     return;
   }
   const progress = showProgressModal({
-    status: "Running bun install…",
+    status: "Installing dependencies…",
     title: "Syncing dependencies",
   });
   try {
@@ -217,7 +217,7 @@ async function syncPackagesAfterPull(): Promise<void> {
     if (result.ok) {
       progress.done();
     } else {
-      progress.fail(result.log ?? "bun install failed");
+      progress.fail(result.log ?? "Install failed");
     }
   } catch (error) {
     progress.fail(errorMessage(error));

package/src/panels/activity-panel.ts

@@ -5,7 +5,7 @@
  * What this replaces: `ui/progress-modal.ts` was **the only surface in Studio with a real error
  * view** — a red headline, the captured log in a `<pre>`, an explicit Close — and it had four call
  * sites, all package operations. It blocked the whole app, offered no cancel, and vanished
- * completely on success, so a `bun install` that hung had no exit and one that failed had a log you
+ * completely on success, so an install that hung had no exit and one that failed had a log you
  * could read exactly once. Every OTHER long operation — git clone, publish, media upload, site
  * import, project open — got a three-second grey line or nothing at all.
  *

package/src/platforms/cloud.ts

@@ -7,8 +7,9 @@
  * before Studio boots — while project-less mode (null) powers the /studio welcome screen.
  *
  * Cloud omissions (Studio degrades per @jxsuite/protocol's route table): pickDirectory, package
- * install/outdated/set-versions (package ops are manifest-only edits), multi-window, gitClone,
- * resolveClass, component discovery, code services.
+ * install and the install-on-open check (a cloud session has no `node_modules`; add, remove and
+ * set-versions update `package.json` and `package-lock.json` through the session's package
+ * service), multi-window, gitClone, resolveClass, component discovery, code services.
  */
 
 import { negotiateCollab } from "@jxsuite/collab/negotiate";
@@ -43,6 +44,8 @@ import type {
   ImportSiteOptions,
   OfferedAction,
   PackageInfo,
+  PackageOpResult,
+  PackageVersionInfo,
   ProjectListEntry,
   SiteBuildResult,
   ProjectSchemasResponse,
@@ -947,17 +950,6 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
     }
   }
 
-  async function writePackageJson(pkg: JsonObject): Promise<void> {
-    const res = await api("/file", {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ path: "package.json", content: `${JSON.stringify(pkg, null, 2)}\n` }),
-    });
-    if (!res.ok) {
-      throw new Error(await errorMessage(res, "Failed to update package.json"));
-    }
-  }
-
   // The bound session's /raw tree; see `documentBaseUrl` below for why both members ride together.
   const repoAssets: Pick<StudioPlatform, "assetSpace" | "documentBaseUrl"> = {};
   if (base) {
@@ -1284,10 +1276,12 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
      *
      * A Worker ships a fixed set of extension packages (specs/extensions.md §5.5), decided by the
      * platform build rather than by this repository's `extensions/` tree, so the gateway is the
-     * only thing that knows. Everything it returns is therefore `bundled: true`: enabling one is a
-     * `project.json` write alone, and an extension the Worker does not bundle is dropped from the
-     * registry before composition — advertising it would promise a toggle that silently does
-     * nothing.
+     * only thing that knows. An extension the Worker does not bundle is dropped from the registry
+     * before composition, so advertising it would promise a toggle that silently does nothing.
+     *
+     * What the Worker bundles is what it can EDIT with, not what the project gets: the site is
+     * built in Pages CI from the project's own install, so an entry the project has not declared is
+     * install-then-enable here exactly as on every other backend (specs/extensions.md §3).
      *
      * `installed` here means DECLARED. Nothing resolves a module in a Worker: `addPackage` is a
      * manifest edit and resolution happens later in Pages CI, so the manifest is the only fact this
@@ -1309,7 +1303,6 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
           ...Object.keys(dependencyBlock(pkg, "devDependencies")),
         ]);
         for (const entry of entries) {
-          entry.bundled = true;
           entry.installed = declared.has(entry.name);
         }
         return entries;
@@ -1435,28 +1428,49 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
       return null;
     },
 
-    // ─── Packages (manifest-only edits; resolution happens in Pages CI) ───
+    // ─── Packages (the session's lockfile service; nothing installs) ───
 
+    /* Each mutation runs npm's installer lockfile-only on the platform, which writes
+       `package.json` and `package-lock.json` back into the shared tree as one change, so a commit
+       carries a lockfile a build can install from frozen (server.md §4.1). A failure changes
+       nothing and its message names the cause. */
     async addPackage(name: string) {
-      const pkg = await readPackageJson();
-      const deps = dependencyBlock(pkg, "dependencies");
-      const at = name.lastIndexOf("@");
-      const [pkgName, version] =
-        at > 0 ? [name.slice(0, at), name.slice(at + 1)] : [name, "latest"];
-      deps[pkgName] = version;
-      pkg["dependencies"] = deps;
-      await writePackageJson(pkg);
+      const res = await api("/packages/add", {
+        body: JSON.stringify({ name }),
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
+      });
+      if (!res.ok) {
+        throw new Error(await errorMessage(res, `Failed to add ${name}`));
+      }
     },
 
     async removePackage(name: string) {
-      const pkg = await readPackageJson();
-      for (const key of ["dependencies", "devDependencies"]) {
-        const deps = pkg[key];
-        if (isJsonObject(deps) && name in deps) {
-          pkg[key] = Object.fromEntries(Object.entries(deps).filter(([dep]) => dep !== name));
-        }
+      const res = await api("/packages/remove", {
+        body: JSON.stringify({ name }),
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
+      });
+      if (!res.ok) {
+        throw new Error(await errorMessage(res, `Failed to remove ${name}`));
+      }
+    },
+
+    async setPackageVersions(updates: { name: string; version: string; dev?: boolean }[]) {
+      const res = await api("/packages/set-versions", {
+        body: JSON.stringify({ updates }),
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
+      });
+      if (!res.ok) {
+        return { log: await errorMessage(res, "Failed to update versions"), ok: false };
       }
-      await writePackageJson(pkg);
+      return readJson<PackageOpResult>(res);
+    },
+
+    async packageVersions() {
+      const res = await api("/packages/versions");
+      return res.ok ? readJson<PackageVersionInfo[]>(res) : [];
     },
 
     async listPackages(): Promise<PackageInfo[]> {

package/src/settings/extension-commands.ts

@@ -135,7 +135,7 @@ export async function enableExtension(specifier: string): Promise<void> {
   let installed = false;
   notifySettingsDocument();
   try {
-    if (!row.installed && !row.bundled) {
+    if (!row.installed) {
       /*
        * `beginActivity`, not `showProgressModal`. `studio-ui-guidelines.md` §13.3 reserves blocking
        * for an operation that cannot proceed while the author edits, and this one can — the only

package/src/settings/extension-rows.ts

@@ -32,8 +32,6 @@ export interface ExtensionRow {
   origin: ExtensionOrigin;
   enabled: boolean;
   installed: boolean;
-  /** The host resolves it without a project install, so enabling is a config write alone. */
-  bundled: boolean;
   /** Why this backend cannot run it, as one sentence. Absent means it can. */
   unavailable?: string | undefined;
   /** Enabled but not installed — the state that fails the next build. */
@@ -69,11 +67,9 @@ export function buildRows(packages: PackageInfo[] | null = null): ExtensionRow[]
   for (const entry of getExtensionCatalog()) {
     const specifier = entry.specifier ?? entry.name;
     const here = entry.installed ?? installed.has(entry.name);
-    const bundled = entry.bundled ?? false;
     const info = resolved.get(entry.name);
     const row: ExtensionRow = {
-      broken: enabled.has(specifier) && !here && !bundled,
-      bundled,
+      broken: enabled.has(specifier) && !here,
       enabled: enabled.has(specifier),
       installed: here,
       name: entry.name,
@@ -102,7 +98,6 @@ export function buildRows(packages: PackageInfo[] | null = null): ExtensionRow[]
     const info = resolved.get(specifier);
     const row: ExtensionRow = {
       broken: !installed.has(specifier) && info === undefined,
-      bundled: false,
       enabled: true,
       installed: installed.has(specifier),
       name: specifier,

package/src/settings/extensions-section.ts

@@ -105,12 +105,9 @@ function noteFor(row: ExtensionRow): RowNote {
       noteTone: "warn",
     };
   }
-  if (!row.installed && !row.bundled) {
+  if (!row.installed) {
     return { note: "Not installed. Turning this on installs it first.", noteTone: "note" };
   }
-  if (row.bundled) {
-    return { note: "Ships with this backend, so it needs no install.", noteTone: "note" };
-  }
   return { note: "", noteTone: "none" };
 }
 
@@ -131,7 +128,7 @@ function blockedReason(row: ExtensionRow): string {
  * Refused while the extension is still enabled, and DISABLED with the reason rather than hidden
  * (`studio-ui-guidelines.md` §10): removing the package while `project.json` still names it
  * manufactures exactly the broken state this section exists to eliminate. It is absent only when
- * there is nothing to remove — a package the project never installed, or one the backend bundles.
+ * there is nothing to remove — a package the project never installed.
  */
 function removeFor(
   row: ExtensionRow,
@@ -140,7 +137,7 @@ function removeFor(
     ? `Turn ${row.title} off first. Removing the package while project.json still names it would fail the next build.`
     : "";
   return {
-    canRemove: row.installed && !row.bundled,
+    canRemove: row.installed,
     removeDisabled: refusal !== "" || extensionOpInFlight() !== null,
     removeHint: refusal === "" ? `Remove ${row.name}` : refusal,
     removeLabel: `Remove ${row.name}`,

package/src/surfaces/block-action-bar.json

@@ -104,9 +104,7 @@
       "display": "contents"
     },
     "& [part=\"link\"]": {
-      "display": "flex",
-      "gap": "var(--jx-space-2)",
-      "alignItems": "center",
+      "$description": "No display here. A closed popover is hidden by the platform's own `[popover]:not(:popover-open)` rule, which the kit lets through with `display: revert-layer`; a `display` declared on the part beats it, and the closed panel stayed laid out at the viewport origin, invisible at opacity 0 and still taking every click and the text cursor meant for the workspace tabs beneath it.",
       "padding": "var(--jx-space-3)"
     },
     "& [part=\"link-field\"]": {

package/src/surfaces/media-library.json

@@ -1027,6 +1027,41 @@
                             }
                           ]
                         },
+                        "oncontextmenu": {
+                          "$prototype": "Function",
+                          "body": [
+                            {
+                              "$switch": {
+                                "$ref": "#/state/mode"
+                              },
+                              "cases": {
+                                "manage": [
+                                  {
+                                    "preventDefault": true
+                                  },
+                                  {
+                                    "operator": "call",
+                                    "target": {
+                                      "$ref": "#/state/contextMenu"
+                                    },
+                                    "value": [
+                                      {
+                                        "$ref": "$map/item/file"
+                                      },
+                                      {
+                                        "$ref": "event#/clientX"
+                                      },
+                                      {
+                                        "$ref": "event#/clientY"
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            }
+                          ],
+                          "description": "Manage mode only: the detail pane's actions at the pointer. Pick mode's dialog is modal, and a menu in the popover layer outside it would be inert, so its right-click is left to the platform."
+                        },
                         "children": [
                           {
                             "tagName": "div",

package/src/surfaces/media-library.ts

@@ -118,6 +118,8 @@ export interface MediaLibraryActions {
   activate: (file: string) => void;
   /** Enter on the grid: the same, for the selected file. */
   activateSelected: () => void;
+  /** A right-click on a tile in manage mode: select it and open its actions at the pointer. */
+  contextMenu: (file: string, x: number, y: number) => void;
   key: (key: string, ctrl: boolean) => void;
   measure: (file: string, width: number, height: number) => void;
   copyRef: () => void;