@jxsuite/studio 10.5.0 → 10.6.0

package/src/services/jxn-language.ts

@@ -0,0 +1,110 @@
+/**
+ * Jx Notation in the Code view: a Monarch grammar, with TypeScript inside a multi-line raw string.
+ *
+ * Multi-line raw strings are where a `.jxn` file keeps code (`spec.md` §22.3), so highlighting one
+ * as TypeScript is the common case and not a guess about a particular file.
+ *
+ * @docs framework/concepts/jxn-files
+ */
+
+import type { languages } from "monaco-editor/editor";
+
+/** The language id, as `monacoLangForPath` answers it. */
+export const JXN_LANGUAGE_ID = "jxn";
+
+/** Comments and brackets, which is what typing and folding need to know. */
+export const JXN_LANGUAGE_CONFIGURATION: languages.LanguageConfiguration = {
+  autoClosingPairs: [
+    { close: "}", open: "{" },
+    { close: ")", open: "(" },
+    { close: '"', open: '"' },
+  ],
+  brackets: [
+    ["{", "}"],
+    ["(", ")"],
+  ],
+  comments: { blockComment: ["/*", "*/"], lineComment: "//" },
+};
+
+/** The tokenizer. */
+export const JXN_MONARCH: languages.IMonarchLanguage = {
+  defaultToken: "",
+  // Monarch otherwise starts in the first state listed, and these are sorted.
+  start: "root",
+  tokenizer: {
+    blockComment: [
+      [/[^/*]+/u, "comment"],
+      [/\/\*/u, "comment", "@push"],
+      [/\*\//u, "comment", "@pop"],
+      [/[/*]/u, "comment"],
+    ],
+    quoted: [
+      [/[^\\"]+/u, "string"],
+      [/\\./u, "string.escape"],
+      [/"/u, "string", "@pop"],
+    ],
+    quotedLines: [
+      [/"""/u, "string", "@pop"],
+      [/\\./u, "string.escape"],
+      [/./u, "string"],
+    ],
+    raw: [
+      [/"#+/u, { cases: { "$0==$S2": { next: "@pop", token: "string" }, "@default": "string" } }],
+      [/[^"]+/u, "string"],
+      [/"/u, "string"],
+    ],
+    rawLines: [
+      [
+        /"""#+/u,
+        {
+          cases: {
+            "$0==$S2": { next: "@pop", nextEmbedded: "@pop", token: "string.quote" },
+            "@default": "",
+          },
+        },
+      ],
+      [/[^"]+/u, ""],
+      [/"/u, ""],
+    ],
+    root: [
+      [/\/\/.*$/u, "comment"],
+      [/\/\*/u, "comment", "@blockComment"],
+      [/\/-/u, "comment"],
+      [/\((?:array|fn|object|on|ref)\)/u, "type"],
+      [/\([^)\s]*\)/u, "invalid"],
+      [/#"""/u, { next: '@rawLines."""#', nextEmbedded: "typescript", token: "string.quote" }],
+      [/##+"""/u, { next: '@rawLines."""$0', nextEmbedded: "typescript", token: "string.quote" }],
+      [/#+"/u, { next: '@raw."$0', token: "string" }],
+      [/"""/u, "string", "@quotedLines"],
+      [/"/u, "string", "@quoted"],
+      [/#(?:true|false|null|inf|-inf|nan)\b/u, "keyword"],
+      [/[-+]?\d[\d_]*(?:\.\d[\d_]*)?(?:[eE][-+]?\d+)?/u, "number"],
+      [/[{};]/u, "delimiter"],
+      [/\$[^\s=(){};"]*/u, "keyword"],
+      [/[^\s=(){};"#]+(?==)/u, "attribute.name"],
+      [/[^\s=(){};"#]+/u, "identifier"],
+      [/[=]/u, "delimiter"],
+    ],
+  },
+};
+
+/** The part of Monaco's API registering a language uses. */
+export type MonacoLanguages = Pick<
+  typeof languages,
+  "register" | "setLanguageConfiguration" | "setMonarchTokensProvider"
+>;
+
+/**
+ * Teach Monaco the language.
+ *
+ * @param languages `monaco.languages`. Absent under a double of Monaco that has no language API,
+ *   and there is nothing to teach then.
+ */
+export function registerJxnLanguage(languages?: MonacoLanguages): void {
+  if (!languages) {
+    return;
+  }
+  languages.register({ extensions: [".jxn"], id: JXN_LANGUAGE_ID });
+  languages.setLanguageConfiguration(JXN_LANGUAGE_ID, JXN_LANGUAGE_CONFIGURATION);
+  languages.setMonarchTokensProvider(JXN_LANGUAGE_ID, JXN_MONARCH);
+}

package/src/services/model-uri.ts

@@ -95,6 +95,9 @@ export function monacoLangForPath(path: string): string {
     case "json": {
       return "json";
     }
+    case "jxn": {
+      return "jxn";
+    }
     case "md": {
       return "markdown";
     }

package/src/services/monaco-setup.ts

@@ -35,7 +35,7 @@
  *   schema completion with it.
  */
 
-import "monaco-editor/editor";
+import * as monacoApi from "monaco-editor/editor";
 // Core widget, icons, tokenization.
 import "monaco-editor/features/codeEditor/register";
 import "monaco-editor/features/codicon/register";
@@ -83,6 +83,8 @@ import projectSchema from "@jxsuite/schema/project-schema.json";
 import type { JsonObject } from "@jxsuite/schema/types";
 import type { ProjectSchemasResponse } from "../types";
 import { bundleUrl } from "./bundle-base";
+import { PROJECT_FILE_NAME } from "@jxsuite/schema/project-file";
+import { registerJxnLanguage } from "./jxn-language";
 
 /* Re-exported for the modules that already imported it from here. New callers should reach for
    `./model-uri` directly — it is Monaco-free, and importing this module loads the editor. */
@@ -150,6 +152,8 @@ if (documentFonts?.ready) {
   });
 }
 
+registerJxnLanguage(monacoApi.languages);
+
 /** Folder globs whose JSON files validate against the (per-project or core) document schema. */
 const DOCUMENT_FILE_MATCH = [
   "pages/*.json",
@@ -205,7 +209,7 @@ function applyJsonSchemas(documentSchema: JsonObject, projectJsonSchema: JsonObj
         uri: "https://jxsuite.com/schema/v1",
       },
       {
-        fileMatch: ["project.json"],
+        fileMatch: [PROJECT_FILE_NAME],
         schema: projectJsonSchema,
         uri: "https://jxsuite.com/schema/project/v1",
       },

package/src/settings/contributed-section.ts

@@ -61,6 +61,7 @@ import type {
   ContributedSurfaceHandle,
   ContributedView,
 } from "../surfaces/settings-contributed";
+import { projectConfigPath } from "../tabs/tab";
 
 // ─── Contribution shape ───────────────────────────────────────────────────────
 
@@ -258,7 +259,7 @@ async function saveProjectConfig(base: string, rerender: () => void) {
        fault, so it is a problem of its own rather than an error parked on the user's field. */
     notify.warn(`Could not validate project.json — ${errorMessage(error)}`, {
       key: "settings:validator",
-      path: "project.json",
+      path: projectConfigPath(),
       source: "Settings",
       tier: "problem",
     });

package/src/settings/extension-commands.ts

@@ -43,6 +43,7 @@ import { notify } from "../services/notify";
 import { notifySettingsDocument } from "./section-registry";
 import { updateSiteConfig } from "../site-context";
 import type { AnyCommand, CommandRegistry } from "../commands/registry";
+import { projectConfigPath } from "../tabs/tab";
 
 /** The package an extension operation is running for, or null. */
 let _inFlight: string | null = null;
@@ -168,7 +169,7 @@ export async function enableExtension(specifier: string): Promise<void> {
     }
     await updateSiteConfig({ extensions: [...enabledSpecifiers(), row.specifier] });
     /* Set after the write resolved, so the latch never claims a file the write did not reach. */
-    _lastEnableWrote = installed ? ["project.json", "package.json"] : ["project.json"];
+    _lastEnableWrote = installed ? [projectConfigPath(), "package.json"] : [projectConfigPath()];
   } finally {
     _inFlight = null;
     notifySettingsDocument();

package/src/settings/general-settings.ts

@@ -25,7 +25,7 @@ import { runActiveReported } from "../commands/run-reported";
 import { getPlatform } from "../platform";
 import { mountOverviewSurface } from "../surfaces/settings-overview";
 import { previewAssetSrcFor } from "../canvas/asset-refs";
-import { PROJECT_CONFIG_PATH } from "../tabs/tab";
+import { projectConfigPath } from "../tabs/tab";
 
 import type {
   OverviewActions,
@@ -191,7 +191,7 @@ function values(container: HTMLElement): OverviewValues {
     error: errors.get(container) ?? null,
     favicon: readFavicon(cfg),
     // `project.json` authored it, whatever tab is in front: the section is project-level.
-    faviconSrc: previewAssetSrcFor(readFavicon(cfg), PROJECT_CONFIG_PATH),
+    faviconSrc: previewAssetSrcFor(readFavicon(cfg), projectConfigPath()),
     name: cfg.name ?? "",
     stylesDisabled: command === undefined,
     stylesTitle: command?.title ?? "",

package/src/settings/settings-document.ts

@@ -29,7 +29,7 @@ import {
 } from "../commands/command-args";
 import { notify } from "../services/notify";
 import { projectState } from "../state";
-import { PROJECT_CONFIG_PATH } from "../tabs/tab";
+import { projectConfigPath } from "../tabs/tab";
 import { lendProjectConfigLayout } from "../tabs/project-config";
 import { focusPane, openTab, paneOfTab, workspace } from "../workspace/workspace";
 import { workspaceHomeTabId } from "../workspace/workspace-ids";
@@ -211,7 +211,7 @@ export function showSettingsDocument(mode: string = shell.stylebook.view): Tab |
     return null;
   }
   rememberStylesView(mode);
-  const existing = workspace.tabs.get(PROJECT_CONFIG_PATH);
+  const existing = workspace.tabs.get(projectConfigPath());
   if (existing) {
     for (const candidate of PROJECT_TAB_MODES.toReversed()) {
       if (!existing.capabilities.modes.includes(candidate)) {
@@ -225,8 +225,8 @@ export function showSettingsDocument(mode: string = shell.stylebook.view): Tab |
   const tab = openTab({
     capabilities: { modes: [...PROJECT_TAB_MODES] },
     document: state.projectConfig ?? {},
-    documentPath: PROJECT_CONFIG_PATH,
-    id: PROJECT_CONFIG_PATH,
+    documentPath: projectConfigPath(),
+    id: projectConfigPath(),
   });
   /* The mode is written here rather than left to the capability list, because `createTab` seeds
      `session.ui.canvasMode` from the first non-preview mode, and a door over the same document has
@@ -303,7 +303,7 @@ export async function openProjectSettings(section?: string): Promise<void> {
        Problem rather than a toast that erases itself. */
     notify.warn(`Could not load extension settings sections — ${errorMessage(error)}`, {
       key: "settings:sections",
-      path: PROJECT_CONFIG_PATH,
+      path: projectConfigPath(),
       source: "Settings",
       tier: "problem",
     });

package/src/shell.ts

@@ -102,10 +102,10 @@ export const NAVIGATOR_PANEL_IDS = [
   "files",
   "search",
   "i18n",
+  "insert",
   "layers",
   "data",
   "packages",
-  "insert",
 ] as const;
 
 export type NavigatorPanelId = (typeof NAVIGATOR_PANEL_IDS)[number];

package/src/studio.ts

@@ -118,6 +118,7 @@ import {
   refreshFormats,
 } from "./format/format-host";
 import {
+  followOpenDocuments,
   loadProject as _loadProject,
   openProject as _openProject,
   findHomePage,
@@ -295,11 +296,12 @@ import { focusPublishHome } from "./publish/publish-workspace";
 import { registerI18nCommands } from "./i18n/i18n-commands";
 import { convertToComponent } from "./editor/convert-to-component";
 import type { GitDiffState } from "./types";
-import { PROJECT_CONFIG_PATH } from "./tabs/tab";
 import type { Tab } from "./tabs/tab";
 import type { JxDocument, ProjectConfig } from "@jxsuite/schema/types";
 import { setBundleBase } from "./services/bundle-base";
 import { mountBootFailureTree, mountShellTree } from "./shell/tree";
+import { PROJECT_FILE_NAME, isProjectConfigPath } from "@jxsuite/schema/project-file";
+import { projectConfigPath } from "./tabs/tab";
 
 // The bundler's `<link rel=modulepreload>` batching is installed on the module scope: before the
 // First lazy `import()` of any surface that runs, so the palette's first open does not pay a
@@ -403,7 +405,7 @@ function setCanvasMode(tab: Tab | null, mode: string) {
   }
   tab.session.ui.canvasMode = mode;
   // The Styles home view follows the author's own switches between Variables and Elements.
-  if (tab.documentPath === PROJECT_CONFIG_PATH) {
+  if (isProjectConfigPath(tab.documentPath)) {
     rememberStylesView(mode);
   }
 }
@@ -1152,7 +1154,7 @@ if (_projectParam) {
          */
         const named =
           _urlParams.get("file") ||
-          (siteCtx.fileRelPath && !siteCtx.fileRelPath.endsWith("project.json")
+          (siteCtx.fileRelPath && !isProjectConfigPath(siteCtx.fileRelPath)
             ? siteCtx.fileRelPath
             : null);
         if (!named) {
@@ -1168,8 +1170,8 @@ if (_projectParam) {
         fileRelPath = named ?? siteCtx.fileRelPath ?? _projectParam;
 
         // When opening project.json, default to home page instead (listing-based, no 404 probes).
-        if (fileRelPath === "project.json" || fileRelPath.endsWith("/project.json")) {
-          fileRelPath = (await findHomePage()) ?? "project.json";
+        if (isProjectConfigPath(fileRelPath) || fileRelPath.endsWith(`/${PROJECT_FILE_NAME}`)) {
+          fileRelPath = (await findHomePage()) ?? projectConfigPath();
         }
 
         const content = await platform.readFile(fileRelPath);
@@ -1205,7 +1207,7 @@ if (_projectParam) {
           if (parsedMode === "content" && activeTab.value) {
             activeTab.value.doc.mode = "content";
           }
-          if (fileRelPath === "project.json" && activeTab.value) {
+          if (isProjectConfigPath(fileRelPath) && activeTab.value) {
             activeTab.value.session.ui.canvasMode = "stylebook";
           }
 
@@ -1228,7 +1230,8 @@ if (_projectParam) {
   }
 } else {
   // Normal mode: probe for project at server root
-  void loadProject();
+  // oxlint-disable-next-line unicorn/prefer-top-level-await -- deliberate fire-and-forget: the shell renders first
+  void loadProjectAndFollowDocuments();
   render();
   ensureFsSync();
 }
@@ -1296,6 +1299,12 @@ function renderLeftPanel() {
   leftPanelMod.render();
 }
 
+/** Load what this window holds, then show what the operating system asks of it from here on. */
+async function loadProjectAndFollowDocuments() {
+  await loadProject();
+  followOpenDocuments();
+}
+
 function loadProject() {
   return _loadProject();
 }
@@ -1334,7 +1343,10 @@ async function openProject(target: ProjectOpenTarget = "thisWindow"): Promise<Pr
     if (!picked) {
       return "cancelled";
     }
-    const { focused } = await platform.openProjectInNewWindow(picked.root);
+    const { declined, focused } = await platform.openProjectInNewWindow(picked.root);
+    if (declined) {
+      return "cancelled";
+    }
     return focused ? "focused" : "newWindow";
   }
   // The SECOND destroyer, and it was ungated for as long as the first one was. `openRecentProject`
@@ -1394,8 +1406,8 @@ async function openRecentProject(root: string) {
     // Multi-window (desktop): if this window already holds a project, open the chosen one in a new
     // Window (focusing an existing window if it's already open) rather than replacing this project.
     if (projectState && platform.openProjectInNewWindow) {
-      await platform.openProjectInNewWindow(root);
-      activity.done("Opened in another window");
+      const { declined } = await platform.openProjectInNewWindow(root);
+      activity.done(declined ? "Didn't open the project" : "Opened in another window");
       return;
     }
 
@@ -1420,6 +1432,11 @@ async function openRecentProject(root: string) {
     // The project is already open in another window, that window is focused and we bail here.
     if (platform.setWindowProject) {
       const res = await platform.setWindowProject(root);
+      if (res.declined) {
+        // The user declined to run its code, and nothing has moved yet: the tabs above stay open.
+        activity.done("Kept the current project");
+        return;
+      }
       if (res.deduped) {
         activity.done("Already open in another window");
         return;
@@ -1439,7 +1456,7 @@ async function openRecentProject(root: string) {
     refreshFormats();
     void loadFormats();
     refreshExtensionUi(platform);
-    const content = await platform.readFile("project.json");
+    const content = await platform.readFile(projectConfigPath());
     /* SAFETY: This is `project.json` at the root the user chose to open, the project's own config
        file whose schema is ProjectConfig; Studio edits it in that shape and does not re-validate it
        on open, as the folder-picker path in `platforms/devserver.ts` does not either. */

package/src/style/variables-view.ts

@@ -36,7 +36,7 @@ import { projectState } from "../store";
 import { shell } from "../shell";
 import { runActiveReported } from "../commands/run-reported";
 import { projectConfigDocument } from "../tabs/project-config";
-import { PROJECT_CONFIG_PATH } from "../tabs/tab";
+import { isProjectConfigPath } from "../tabs/tab";
 import { paneRegion } from "../ui/regions";
 import { focusCssVar, focusCssVarGroup, renderCssVarsEditor } from "../settings/css-vars-editor";
 import { variablesFocus } from "./variables-focus";
@@ -126,7 +126,7 @@ function manageContexts(): void {
  * place is the tab's own. A no-op with no project, and for any other document.
  */
 function bindConfiguration(tab: Tab): void {
-  if (projectState && tab.documentPath === PROJECT_CONFIG_PATH) {
+  if (projectState && isProjectConfigPath(tab.documentPath)) {
     projectConfigDocument();
   }
 }