@jxsuite/studio 2.3.0 → 2.4.0

package/dist/studio.js

@@ -1,6 +1,6 @@
 import {
   seedPublishConnected
-} from "./chunks/studio-vdpcpada.js";
+} from "./chunks/studio-tqr02xaa.js";
 import"./chunks/studio-wdt9y92a.js";
 import {
   ElementResolutionController,
@@ -67,7 +67,7 @@ import {
   registerStyleCommands,
   render as render3,
   setInspectorTab
-} from "./chunks/studio-5amdrjm4.js";
+} from "./chunks/studio-8x4399kc.js";
 import {
   CommandUnavailableError,
   chordFromEvent,
@@ -99,7 +99,7 @@ import {
   showSlashMenu,
   showSlashMenuAtRect,
   suppressBlockActionBar
-} from "./chunks/studio-yxzgjq8q.js";
+} from "./chunks/studio-377bbhtz.js";
 import {
   addableContexts,
   defaultCommands,
@@ -111,7 +111,7 @@ import {
   tokenLabel,
   transposeStylebookStyle,
   writeTokenOverride
-} from "./chunks/studio-a11d3a1b.js";
+} from "./chunks/studio-yz06mkfj.js";
 import {
   DERIVE_PRESETS,
   JxColorPopover,
@@ -144,7 +144,7 @@ import {
   spNumberField,
   spTextArea,
   spTextField
-} from "./chunks/studio-hs8x23fv.js";
+} from "./chunks/studio-ng5gbxkj.js";
 import {
   LitElement,
   css
@@ -160,7 +160,7 @@ import {
 import {
   initQuickSearch,
   openQuickSearch
-} from "./chunks/studio-bak2cyjr.js";
+} from "./chunks/studio-qd4k0h80.js";
 import {
   addRecentProject,
   clearRecentProjects,
@@ -187,10 +187,10 @@ import {
   removeRecentProject,
   renderFilesTemplate,
   seedEntry
-} from "./chunks/studio-ncnet0ba.js";
+} from "./chunks/studio-1dgqagzz.js";
 import {
   computeWindow
-} from "./chunks/studio-cf4rk7kv.js";
+} from "./chunks/studio-kwavhmdr.js";
 import {
   autoSyncProjectOnOpen,
   cleanupGitPanel,
@@ -211,13 +211,13 @@ import {
   registerSourceControlCommands,
   renderGitPanel,
   stripRange
-} from "./chunks/studio-4enps87v.js";
+} from "./chunks/studio-q07vj7p9.js";
 import {
   createPanelScheduler
 } from "./chunks/studio-8jpzqk5s.js";
 import {
   selectContributedEntry
-} from "./chunks/studio-cv606rs1.js";
+} from "./chunks/studio-rdsvb808.js";
 import {
   notifySettingsDocument,
   onSettingsDocumentChanged,
@@ -238,7 +238,7 @@ import {
   renderForm,
   renderProvenanceChip,
   resolveContextPointer
-} from "./chunks/studio-zdkgwhkv.js";
+} from "./chunks/studio-ky68mp85.js";
 import {
   validateDoc,
   validateProjectConfig
@@ -263,7 +263,7 @@ import {
   registerGridCommands,
   scanLibrary,
   uploadDirForCategory
-} from "./chunks/studio-0e4h32g6.js";
+} from "./chunks/studio-0evba9z5.js";
 import {
   live
 } from "./chunks/studio-c31yb4t6.js";
@@ -307,7 +307,7 @@ import {
   setIncludeDrafts,
   startFsSync,
   writesForTurn
-} from "./chunks/studio-x3etxs0s.js";
+} from "./chunks/studio-wxthr2x1.js";
 import"./chunks/studio-2w11grav.js";
 import"./chunks/studio-bw5dz6km.js";
 import {
@@ -316,18 +316,18 @@ import {
   isImage,
   setMediaChangedHandler,
   uploadAssets
-} from "./chunks/studio-4058pg09.js";
+} from "./chunks/studio-102jzb8r.js";
 import {
   beginActivity,
   registerActivityPanel,
   showProgressModal
-} from "./chunks/studio-3q65xvzv.js";
+} from "./chunks/studio-eqyybj2e.js";
 import {
   currentDeploy,
   latestDeployment,
   noteDeployment,
   platformSupportsPublish
-} from "./chunks/studio-5ne8mdx9.js";
+} from "./chunks/studio-53dn6e6t.js";
 import {
   CATEGORIES,
   SPAN_FULL_RENDER,
@@ -439,7 +439,7 @@ import {
   timeSpan,
   timeSpanAsync,
   updateActivePanelHeaders
-} from "./chunks/studio-10s469da.js";
+} from "./chunks/studio-yk7037sg.js";
 import {
   BOTTOM_TAB_IDS,
   BUFFER_COMMIT,
@@ -606,7 +606,7 @@ import {
   updateSiteConfig,
   view,
   workspace
-} from "./chunks/studio-hk523hby.js";
+} from "./chunks/studio-ddgrc5hs.js";
 import {
   classMap,
   ifDefined,
@@ -669,7 +669,7 @@ import {
   mountStillWanted,
   refreshExtensionUi,
   refreshFormats
-} from "./chunks/studio-50eed4c9.js";
+} from "./chunks/studio-6gcrk1bq.js";
 import {
   getPlatform,
   hasPlatform,
@@ -16807,7 +16807,7 @@ function entryIdsFor(collection) {
   if (known) {
     return known;
   }
-  const pending = import("./chunks/content-source-56xpvx83.js").then((m) => m.listCollectionEntryIds(collection));
+  const pending = import("./chunks/content-source-jrvn5vwy.js").then((m) => m.listCollectionEntryIds(collection));
   entryIdCache.set(collection, pending);
   return pending;
 }
@@ -17068,7 +17068,7 @@ function renderEntryMode(surface, tab) {
   });
 }
 async function openEntryEditor(path) {
-  const { openFileInTab: openFileInTab2 } = await import("./chunks/files-gkz202dp.js");
+  const { openFileInTab: openFileInTab2 } = await import("./chunks/files-jdbtammm.js");
   await openFileInTab2(path);
   for (const [id, tab] of workspace.tabs.entries()) {
     if (tab.documentPath !== path) {
@@ -17129,7 +17129,7 @@ async function createEntry(collectionName) {
     });
     return null;
   }
-  const { createFileIn: createFileIn2 } = await import("./chunks/files-gkz202dp.js");
+  const { createFileIn: createFileIn2 } = await import("./chunks/files-jdbtammm.js");
   const created = await createFileIn2({
     content,
     dir: collection.dir,
@@ -22349,7 +22349,7 @@ function groupProblems(records = problems) {
   return groups;
 }
 function openProblemPath(path) {
-  import("./chunks/files-gkz202dp.js").then((m) => m.openFileInTab(path));
+  import("./chunks/files-jdbtammm.js").then((m) => m.openFileInTab(path));
 }
 function actionTpl(record) {
   const id = record.action;
@@ -27264,6 +27264,7 @@ var cache2 = null;
 var proxyConfigured = false;
 var proxyManaged = false;
 var proxyDefaultModel = "";
+var proxyCode;
 var proxyProbe = null;
 var probeListeners = new Set;
 function invalidateModelCache() {
@@ -27271,6 +27272,7 @@ function invalidateModelCache() {
   proxyConfigured = false;
   proxyManaged = false;
   proxyDefaultModel = "";
+  proxyCode = undefined;
   proxyProbe = null;
 }
 function ensureProxyProbe(onSettled) {
@@ -27292,6 +27294,9 @@ function isProxyConfigured() {
 function isManagedProxy() {
   return proxyManaged;
 }
+function proxyStateCode() {
+  return proxyCode;
+}
 function siblingRoute(chatUrl, segment) {
   let url;
   try {
@@ -27326,6 +27331,7 @@ async function fetchAvailableModels(opts = {}) {
   proxyConfigured = data.configured === true;
   proxyManaged = data.managed === true;
   proxyDefaultModel = data.defaultModel ?? "";
+  proxyCode = data.code;
   cache2 = (data.models || []).map((m) => ({ id: m.id, name: m.name || m.id }));
   return cache2;
 }
@@ -27490,17 +27496,22 @@ function createManagedConnect(opts) {
     if (!canOffer()) {
       return nothing;
     }
+    const lapsed = proxyStateCode() === "cf_reconnect_required";
+    const busyLabel = lapsed ? "Reconnecting…" : "Connecting…";
     return html`
-      <div class="ai-managed-connect">
-        <div>Use Workers AI on your own Cloudflare account — no API key needed.</div>
+      <div class="ai-managed-connect" data-jx-recommended="cloudflare">
+        <div class="ai-managed-connect-lede">
+          ${lapsed ? "Your Cloudflare connection has expired. Reconnect to keep using the assistant." : "Recommended — run the assistant on Workers AI in your own Cloudflare account. No API key to create, copy or rotate."}
+        </div>
         <sp-button
           size="s"
+          variant="accent"
           ?disabled=${busy}
           @click=${() => {
       connect();
     }}
         >
-          ${busy ? "Connecting…" : "Connect Cloudflare"}
+          ${busy ? busyLabel : lapsed ? "Reconnect Cloudflare" : "Connect Cloudflare"}
         </sp-button>
         ${connectError ? html`<div class="ai-managed-connect-error">${connectError}</div>` : nothing}
         <div class="ai-managed-connect-divider">— or bring your own key —</div>
@@ -28900,6 +28911,7 @@ function createCloudPlatform(project) {
     id: "cloud",
     projectRoot: root,
     canvasUrl: "/canvas.html",
+    ...base ? { documentBaseUrl: `${base}/raw/` } : {},
     openProjectPicker: "repo-list",
     createDestination: "repo",
     async activate() {
@@ -58579,9 +58591,9 @@ function renderDefsEditor(container) {
 
 // src/version.ts
 var APP_NAME = "Jx Studio";
-var VERSION = "2.3.0";
-var BUILD_DATE = "2026-08-23T02:43:07.261Z";
-var GIT_COMMIT = "968e4d4";
+var VERSION = "2.4.0";
+var BUILD_DATE = "2026-08-23T19:11:17.175Z";
+var GIT_COMMIT = "bea72f9";
 var LINKS = {
   github: "https://github.com/jxsuite/jx",
   docs: "https://github.com/jxsuite/jx#readme",
@@ -59658,7 +59670,7 @@ async function openProjectSettings(section) {
   showSettingsDocument();
   notifySettingsDocument();
   try {
-    const { syncExtensionSettingsSections } = await import("./chunks/extension-sections-g34239vm.js");
+    const { syncExtensionSettingsSections } = await import("./chunks/extension-sections-2zjyty05.js");
     await syncExtensionSettingsSections();
   } catch (error) {
     notify.warn(`Could not load extension settings sections — ${errorMessage(error)}`, {
@@ -60282,7 +60294,7 @@ function publishCommands() {
         name: "set_up_publishing"
       },
       run: async () => {
-        const { openPublishPanel } = await import("./chunks/publish-panel-ptddc3kg.js");
+        const { openPublishPanel } = await import("./chunks/publish-panel-2we6smjv.js");
         openPublishPanel();
       },
       title: "Set Up Publishing"
@@ -61004,7 +61016,7 @@ function i18nCommands() {
           });
           return;
         }
-        const { openFileInTab: openFileInTab2 } = await import("./chunks/files-gkz202dp.js");
+        const { openFileInTab: openFileInTab2 } = await import("./chunks/files-jdbtammm.js");
         await openFileInTab2(path);
       },
       title: "Open Translation"
@@ -61051,7 +61063,7 @@ function i18nCommands() {
           return;
         }
         const cut = path.lastIndexOf("/");
-        const { createFileIn: createFileIn2, openFileInTab: openFileInTab2 } = await import("./chunks/files-gkz202dp.js");
+        const { createFileIn: createFileIn2, openFileInTab: openFileInTab2 } = await import("./chunks/files-jdbtammm.js");
         const created = await createFileIn2({
           content,
           dir: cut === -1 ? "." : path.slice(0, cut),
@@ -61864,5 +61876,5 @@ export {
   hasUnsavedTabs
 };
 
-//# debugId=7167B13925BF1BB364756E2164756E21
+//# debugId=5769FAD30A86F19564756E2164756E21
 //# sourceMappingURL=studio.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -57,13 +57,13 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.1.0",
-    "@jxsuite/ai": "^0.36.1",
+    "@jxsuite/ai": "^0.36.2",
     "@jxsuite/collab": "^0.8.1",
-    "@jxsuite/create": "^1.3.3",
-    "@jxsuite/formulas": "^0.0.9",
+    "@jxsuite/create": "^1.3.4",
+    "@jxsuite/formulas": "^0.0.10",
     "@jxsuite/markup": "^0.4.5",
-    "@jxsuite/protocol": "^1.1.2",
-    "@jxsuite/runtime": "^2.0.2",
+    "@jxsuite/protocol": "^1.2.0",
+    "@jxsuite/runtime": "^2.0.3",
     "@jxsuite/schema": "^1.8.0",
     "@spectrum-web-components/accordion": "^1.12.2",
     "@spectrum-web-components/action-bar": "1.12.2",

package/src/canvas/canvas-live-render.ts

@@ -19,7 +19,7 @@ import {
   getEffectiveMedia,
   resolveLayoutDoc,
 } from "../site-context";
-import { canvasBaseOrigin } from "./canvas-origin";
+import { documentBase } from "./canvas-origin";
 import { componentRegistry, computeRelativePath } from "../files/components";
 import { prepareForEditMode } from "../utils/edit-display";
 import {
@@ -179,10 +179,8 @@ export async function resolveCanvasDocument(
     }
   }
 
-  const root = projectState?.projectRoot || "";
-  const docPrefix = root ? `${root}/` : "";
   const docBase = S.documentPath
-    ? `${canvasBaseOrigin()}/${docPrefix}${S.documentPath}`
+    ? new URL(S.documentPath, documentBase(projectState?.projectRoot)).href
     : undefined;
 
   // Substitute chosen dynamic route params ({$ref: "#/$params/x"} → literal), inject state.$page,

package/src/canvas/canvas-origin.ts

@@ -25,6 +25,31 @@ export function canvasBaseOrigin(): string {
   return location.origin;
 }
 
+/**
+ * The base the canvas fetches PROJECT FILES against — component `$ref`s, `$src` modules, images.
+ *
+ * Two shapes, and the platform chooses. Most hosts serve the project tree from their web root, so
+ * `<canvas origin>/<projectRoot>/` is a real URL: the dev server serves by path (absolute
+ * filesystem paths included) and the desktop loopback does the same. Those set nothing.
+ *
+ * A host whose `projectRoot` is an IDENTIFIER rather than a served path sets `documentBaseUrl`. Jx
+ * Cloud is one — its root is `owner/repo@branch`, and the default produced a URL nothing answered,
+ * so every `$ref` fetch fell through to the SPA fallback. That fallback returns the marketing page
+ * at **HTTP 200**, so `res.ok` passed and the runtime's `res.json()` died on `Unexpected token
+ * '<'`; images failed the same way and reported nothing.
+ *
+ * @param {string | undefined} projectRoot - The active project root, for the default shape.
+ * @returns {string} A base URL ending in `/`, safe to pass to `new URL(relativePath, base)`.
+ */
+export function documentBase(projectRoot?: string): string {
+  const declared = hasPlatform() ? getPlatform().documentBaseUrl : undefined;
+  if (declared) {
+    return declared.endsWith("/") ? declared : `${declared}/`;
+  }
+  const root = projectRoot || "";
+  return `${canvasBaseOrigin()}/${root ? `${root}/` : ""}`;
+}
+
 /**
  * Build an absolute loopback-origin src for a PROJECT asset path referenced by a PARENT-realm
  * (shell) preview <img>. On the views:// shell a relative "/images/foo.png" resolves to

package/src/platforms/cloud.ts

@@ -223,6 +223,15 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
     id: "cloud",
     projectRoot: root,
     canvasUrl: "/canvas.html",
+    /* The projectRoot here is the IDENTIFIER "owner/repo@branch", not a served path, so the canvas's
+       default base — <origin>/<projectRoot>/ — addressed nothing. Every component $ref fetch landed
+       on the SPA fallback, which answers the marketing page at HTTP 200, so res.ok passed and the
+       runtime's res.json() died on "Unexpected token '<'". Images failed the same way, silently.
+       The session serves the project tree at /raw.
+
+       Conditional because `base` is "" until a project is bound, and "/raw/" would be a confident
+       wrong answer — worse than the default, which at least fails visibly. */
+    ...(base ? { documentBaseUrl: `${base}/raw/` } : {}),
     /* Open Project routes through Studio's repo picker (write-access repos via listRepos +
        importProject) — sessions are URL-bound, so openProject() below never opens a dialog. */
     openProjectPicker: "repo-list",

package/src/services/ai-models.ts

@@ -24,6 +24,7 @@ let cache: AiModel[] | null = null;
 let proxyConfigured = false;
 let proxyManaged = false;
 let proxyDefaultModel = "";
+let proxyCode: AiModelsResponse["code"];
 
 /**
  * One-shot capability probe shared by every credentials gate, plus the hosts to repaint when it
@@ -39,7 +40,8 @@ export function invalidateModelCache() {
   proxyConfigured = false;
   proxyManaged = false;
   proxyDefaultModel = "";
-  /* The probe's result IS the three flags above. Clearing them while keeping the settled promise
+  proxyCode = undefined;
+  /* The probe's result IS the flags above. Clearing them while keeping the settled promise
      would strand every gate on a permanent "unconfigured, unmanaged" reading — ensureProxyProbe
      would no-op forever and the managed option would vanish until a full reload. */
   proxyProbe = null;
@@ -91,6 +93,16 @@ export function isManagedProxy(): boolean {
   return proxyManaged;
 }
 
+/**
+ * Why the proxy reported itself unconfigured, when it said so.
+ *
+ * Undefined on any backend that does not send one — every gate must treat that as "no reason given"
+ * and fall back to the plain connect wording.
+ */
+export function proxyStateCode(): AiModelsResponse["code"] {
+  return proxyCode;
+}
+
 /** The proxy's preferred model id ("" when it does not declare one). */
 export function getProxyDefaultModel(): string {
   return proxyDefaultModel;
@@ -161,6 +173,7 @@ export async function fetchAvailableModels(
   proxyConfigured = data.configured === true;
   proxyManaged = data.managed === true;
   proxyDefaultModel = data.defaultModel ?? "";
+  proxyCode = data.code;
   cache = (data.models || []).map((m) => ({ id: m.id, name: m.name || m.id }));
   return cache;
 }

package/src/types.ts

@@ -181,6 +181,23 @@ export interface StudioPlatform {
    * Not keyed on `id`: chromium and electrobun both report `"desktop"`, and only electrobun defers.
    */
   canvasUrlDeferred?: boolean;
+  /**
+   * Base URL the canvas fetches PROJECT FILES from — component `$ref`s, `$src` modules, images.
+   *
+   * The renderer resolves a `$ref` with `fetch(url).then(r => r.json())` from inside the iframe, so
+   * project files have to exist at a URL, not merely behind {@link readFile}. Hosts that serve the
+   * project tree from their web root need no value here: the default is `<canvas
+   * origin>/<projectRoot>/`, which is what the dev server and the desktop loopback both already
+   * answer.
+   *
+   * A host whose project files are NOT at a URL-shaped `projectRoot` must set this. Jx Cloud is
+   * one: its `projectRoot` is the identifier `owner/repo@branch`, nothing served the tree, and
+   * every `$ref` fetch landed on the SPA fallback — which answers HTML at **200**, so `res.ok`
+   * passed and the parse died on `Unexpected token '<'`. Images failed the same way in silence.
+   *
+   * Must end in `/`; a project-relative path is appended to it verbatim.
+   */
+  documentBaseUrl?: string;
   activate: (root?: string) => Promise<void>;
   openProject: () => Promise<{
     config: ProjectConfig;

package/src/ui/ai-managed-connect.ts

@@ -24,6 +24,7 @@ import {
   fetchAvailableModels,
   isManagedProxy,
   isProxyConfigured,
+  proxyStateCode,
 } from "../services/ai-models";
 
 export interface ManagedConnectOptions {
@@ -91,17 +92,31 @@ export function createManagedConnect(opts: ManagedConnectOptions): ManagedConnec
     if (!canOffer()) {
       return nothing;
     }
+    /*
+     * A lapsed grant and a fresh one get different words. The backend distinguishes them because
+     * "connect" is an invitation and "reconnect" is an explanation — and on a managed platform the
+     * lapsed case is the common one: a Cloudflare access token lives an hour.
+     */
+    const lapsed = proxyStateCode() === "cf_reconnect_required";
+    const busyLabel = lapsed ? "Reconnecting…" : "Connecting…";
     return html`
-      <div class="ai-managed-connect">
-        <div>Use Workers AI on your own Cloudflare account — no API key needed.</div>
+      <div class="ai-managed-connect" data-jx-recommended="cloudflare">
+        <div class="ai-managed-connect-lede">
+          ${
+            lapsed
+              ? "Your Cloudflare connection has expired. Reconnect to keep using the assistant."
+              : "Recommended — run the assistant on Workers AI in your own Cloudflare account. No API key to create, copy or rotate."
+          }
+        </div>
         <sp-button
           size="s"
+          variant="accent"
           ?disabled=${busy}
           @click=${() => {
             void connect();
           }}
         >
-          ${busy ? "Connecting…" : "Connect Cloudflare"}
+          ${busy ? busyLabel : lapsed ? "Reconnect Cloudflare" : "Connect Cloudflare"}
         </sp-button>
         ${connectError ? html`<div class="ai-managed-connect-error">${connectError}</div>` : nothing}
         <div class="ai-managed-connect-divider">— or bring your own key —</div>

package/styles/shell.css

@@ -753,6 +753,13 @@
   gap: 10px;
   width: 100%;
 }
+/* The lede reads as the recommendation, so it carries weight the divider beneath it does not. */
+.ai-managed-connect-lede {
+  color: var(--fg);
+  font-size: var(--spectrum-font-size-75, 12px);
+  max-width: 280px;
+  text-align: center;
+}
 .ai-managed-connect-error {
   color: var(--danger);
   font-size: var(--spectrum-font-size-50, 11px);