@jxsuite/studio 9.0.0 → 10.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "9.0.0",
+  "version": "10.1.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.2",
+    "@jxsuite/collab": "^0.11.4",
+    "@jxsuite/create": "^1.5.1",
+    "@jxsuite/formulas": "^0.0.26",
+    "@jxsuite/markup": "^1.0.2",
+    "@jxsuite/protocol": "^6.1.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/platform-errors.ts

@@ -26,6 +26,8 @@ export interface PlatformErrorInfo {
   heading?: string;
   /** What to do once one of its actions is done. */
   retry?: RetryHint;
+  /** The paths a `conflict` names: the files the remote changed that this side changed too. */
+  conflicts?: string[];
 }
 
 const RETRY_HINTS = new Set<string>(["reload", "repeat", "none"]);
@@ -90,7 +92,7 @@ export function platformErrorInfo(cause: unknown): PlatformErrorInfo {
   if (!isJsonObject(cause)) {
     return {};
   }
-  const { actions, code, heading, installUrl, retry, type } = cause;
+  const { actions, code, conflicts, heading, installUrl, retry, type } = cause;
   const info: PlatformErrorInfo = {};
   // A problem type wins over a legacy code: it is the shape the backend is migrating toward.
   const derived = problemSlug(type) ?? (isString(code) ? normalizeCode(code) : null);
@@ -109,9 +111,23 @@ export function platformErrorInfo(cause: unknown): PlatformErrorInfo {
   if (isRetryHint(retry)) {
     info.retry = retry;
   }
+  if (Array.isArray(conflicts)) {
+    info.conflicts = conflicts.filter((path) => isString(path));
+  }
   return info;
 }
 
+/**
+ * The files a refused publish overlaps on the remote, when the error is that refusal: a pull or a
+ * commit the remote has moved under, whose changes touch the same paths (`pull_conflict`, or the
+ * `conflict` problem type carrying `conflicts`). Null for every other failure.
+ */
+export function remoteConflictsOf(cause: unknown): string[] | null {
+  const info = platformErrorInfo(cause);
+  const conflicting = info.code === "pull-conflict" || info.code === "conflict";
+  return conflicting && info.conflicts ? info.conflicts : null;
+}
+
 /** The GitHub-App install link when the error is the structured needs-installation 403. */
 export function installUrlOf(cause: unknown): string | null {
   const info = platformErrorInfo(cause);

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";
@@ -36,6 +37,7 @@ import type {
   FsEvent,
   FsResyncReason,
   GitBranchesResult,
+  GitCommitBranchResult,
   GitLogEntry,
   GitStatusResult,
   ImportProgressEvent,
@@ -43,6 +45,8 @@ import type {
   ImportSiteOptions,
   OfferedAction,
   PackageInfo,
+  PackageOpResult,
+  PackageVersionInfo,
   ProjectListEntry,
   SiteBuildResult,
   ProjectSchemasResponse,
@@ -217,6 +221,7 @@ interface StructuredBody extends ErrorBody {
   actions?: JsonValue;
   heading?: JsonValue;
   retry?: JsonValue;
+  conflicts?: JsonValue;
 }
 
 /** What {@link platformError} carries on the Error it returns: the HTTP status, plus what it found. */
@@ -268,6 +273,10 @@ async function platformError(res: Response, fallback: string): Promise<Error> {
   if (retry !== undefined) {
     details.retry = retry;
   }
+  const conflicts = body?.conflicts;
+  if (Array.isArray(conflicts)) {
+    details.conflicts = conflicts.filter((path) => isString(path));
+  }
   return Object.assign(new Error(problemDetail(body) ?? fallback), details);
 }
 
@@ -947,17 +956,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 +1282,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 +1309,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 +1434,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[]> {
@@ -1576,6 +1596,14 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
       await okJson(await postJson("/git/create-branch", { name }), "Failed to create branch");
     },
 
+    /** One commit, parented on the session's base, onto a branch the backend creates for it. */
+    async gitCommitBranch(opts: { branch: string; message: string }) {
+      return okJson<GitCommitBranchResult>(
+        await postJson("/git/commit-branch", { branch: opts.branch, message: opts.message }),
+        `Could not publish to ${opts.branch}`,
+      );
+    },
+
     async gitDiff(path?: string) {
       const data = await okJson<{ diff: string }>(
         await api(`/git/diff?path=${encodeURIComponent(path ?? "")}`),