@jxsuite/studio 2.3.0 → 2.4.1

package/dist/iframe-entry.js

@@ -2200,11 +2200,15 @@ async function resolve(source) {
   if (_resolveCache.has(source)) {
     return _resolveCache.get(source);
   }
-  const p = fetch(source).then((res) => {
+  const p = fetch(source).then(async (res) => {
     if (!res.ok) {
       throw new Error(`Jx: failed to fetch ${source} (${res.status})`);
     }
-    return res.json();
+    const contentType = res.headers?.get("Content-Type") ?? "";
+    if (contentType.includes("text/html")) {
+      throw new Error(`Jx: ${source} returned HTML, not a document — the host answered a missing file with its ` + `app shell (a single-page fallback), so this path is not served.`);
+    }
+    return await res.json();
   });
   _resolveCache.set(source, p);
   return p;
@@ -3476,6 +3480,16 @@ function getPath2(obj, path) {
   return readPath(obj, path);
 }
 var _privatePropWarned = new Set;
+function instanceSupplies(el, key) {
+  if (Object.hasOwn(el, key)) {
+    return true;
+  }
+  if (el.hasAttribute(key)) {
+    return true;
+  }
+  const kebab = key.replaceAll(/[A-Z]/gu, (c) => `-${c.toLowerCase()}`);
+  return kebab !== key && el.hasAttribute(kebab);
+}
 function refusePrivateProp(key, where) {
   if (!isPrivateStateKey(key)) {
     return false;
@@ -3626,7 +3640,7 @@ async function defineElement(source, baseUrl) {
         if (isPrivateStateKey(key)) {
           continue;
         }
-        if (key in this && this[key] !== undefined) {
+        if (key in this && this[key] !== undefined && instanceSupplies(this, key)) {
           state[key] = this[key];
         }
       }
@@ -4195,6 +4209,8 @@ function injectHead(doc) {
   }
 }
 function makeStamper(ctx) {
+  const islands = [];
+  const insideIsland = (path) => islands.some((island) => path.length > island.length && island.every((seg, i) => path[i] === seg));
   return (created, path, def2) => {
     if (!(created instanceof HTMLElement)) {
       return;
@@ -4203,8 +4219,10 @@ function makeStamper(ctx) {
     if (isDefinitionRoot) {
       created.dataset.jxDefinitionRoot = "";
     }
-    if (!isDefinitionRoot && created.tagName.includes("-") && isEditableMode(ctx.canvasMode)) {
+    const isIsland = !isDefinitionRoot && created.tagName.includes("-") && isEditableMode(ctx.canvasMode);
+    if (isIsland) {
       created.contentEditable = "false";
+      islands.push(path);
     }
     const classified = classifyRenderNode(path, def2, ctx);
     if (classified.kind === "layout") {
@@ -4221,6 +4239,9 @@ function makeStamper(ctx) {
       return;
     }
     created.dataset.jxPath = serializeJxPath(classified.path);
+    if (!isIsland && isEditableMode(ctx.canvasMode) && insideIsland(path)) {
+      created.contentEditable = "true";
+    }
   };
 }
 function installCanvasImageRetry(root, maxAttempts = 3) {
@@ -5184,6 +5205,7 @@ var insertFn = null;
 var endFn = null;
 var _plainMode = false;
 var _plainOriginal = "";
+var _plainPosted = false;
 var editableVerdicts = null;
 function setEditableVerdicts(verdicts) {
   editableVerdicts = verdicts;
@@ -5203,6 +5225,7 @@ function startEditing(el, path, callbacks, opts) {
   endFn = callbacks.onEnd;
   _plainMode = opts?.plainText === true;
   _plainOriginal = _plainMode ? el.textContent ?? "" : "";
+  _plainPosted = false;
   el.dataset.jxActiveBlock = "";
   if (_plainMode) {
     try {
@@ -5236,6 +5259,7 @@ function stopEditing(silent = false) {
   insertFn = null;
   _plainMode = false;
   _plainOriginal = "";
+  _plainPosted = false;
   if (silent) {
     endFn = null;
   } else if (endFn) {
@@ -5247,6 +5271,9 @@ function stopEditing(silent = false) {
 function commitActiveBlock() {
   commitChanges(true);
 }
+function isPlainSession() {
+  return _plainMode && activeEl !== null;
+}
 function isEditing() {
   return activeEl !== null;
 }
@@ -5332,6 +5359,7 @@ function releaseWithoutCommit() {
   insertFn = null;
   _plainMode = false;
   _plainOriginal = "";
+  _plainPosted = false;
   if (endFn) {
     const fn = endFn;
     endFn = null;
@@ -5343,8 +5371,14 @@ function commitChanges(inPlace) {
     return;
   }
   if (_plainMode) {
-    commitFn(activePath, null, (activeEl.textContent ?? "").replaceAll(`
-`, " "), inPlace);
+    const text = (activeEl.textContent ?? "").replaceAll(`
+`, " ");
+    if (text === _plainOriginal.replaceAll(`
+`, " ") && !_plainPosted) {
+      return;
+    }
+    _plainPosted = true;
+    commitFn(activePath, null, text, inPlace);
     return;
   }
   normalizeInlineContent(activeEl);
@@ -5467,6 +5501,9 @@ function openSlashMenu(opts) {
   if (!activeEl || !insertFn || !activePath) {
     return;
   }
+  if (_plainMode) {
+    return;
+  }
   const sel = window.getSelection();
   if (!sel || !sel.rangeCount) {
     return;
@@ -5982,6 +6019,7 @@ var INSERT_TEXT = new Set([
   "insertTranspose"
 ]);
 var NATIVE_FORMAT_PREFIX = "format";
+var PROP_STRUCTURAL = new Set(["insertParagraph", "insertLineBreak"]);
 function classifyBeforeInput(ctx) {
   const { inputType, from, to } = ctx;
   if (inputType === "insertCompositionText" || inputType === "insertFromComposition") {
@@ -5996,6 +6034,9 @@ function classifyBeforeInput(ctx) {
   if (inputType === "insertFromDrop" || inputType === "deleteByDrag") {
     return { kind: "reject" };
   }
+  if (ctx.inPropHost) {
+    return PROP_STRUCTURAL.has(inputType) ? { kind: "reject" } : { kind: "native" };
+  }
   if (!from || !to) {
     return { kind: "reject" };
   }
@@ -6103,6 +6144,11 @@ function startEditableRoot(container, deps) {
     composing = false;
     scheduleCommitTick();
   };
+  const forget = () => {
+    cancelCommitTick();
+    activeEl2 = null;
+    activeKey = null;
+  };
   const deactivate = () => {
     if (!activeEl2) {
       return;
@@ -6177,6 +6223,7 @@ function startEditableRoot(container, deps) {
       atBlockStart: resolved ? isAtBlockStart(resolved.from) : false,
       data: e.data ?? "",
       from: resolved?.from ?? null,
+      inPropHost: activeEl2 !== null && activeKey === null,
       inputType: e.inputType,
       to: resolved?.to ?? null
     });
@@ -6247,6 +6294,7 @@ function startEditableRoot(container, deps) {
   doc.addEventListener("pointerdown", onPointerDownCapture, true);
   return {
     capture: () => captureDocSelection(container, deps.isEditableBlock),
+    forget,
     isComposing: () => composing,
     flush: () => {
       if (composing) {
@@ -6742,14 +6790,18 @@ function startIframeInlineEdit(channel, container, opts) {
       return true;
     }
     const node = getNodeAtPath(shadowDoc, hostPath);
+    const attrs = node?.attributes;
+    if (attrs?.[`props.${prop}`] !== undefined || attrs?.[prop] !== undefined) {
+      return false;
+    }
     const raw = node?.$props?.[prop];
     if (raw == null) {
       return true;
     }
-    if (typeof raw === "object") {
+    if (typeof raw !== "string") {
       return false;
     }
-    return !(typeof raw === "string" && raw.includes("${"));
+    return !raw.includes("${");
   };
   const enterPropEditAt = (el, hostPath, prop) => {
     channel.post({ kind: "editStart", path: hostPath, prop });
@@ -6764,6 +6816,7 @@ function startIframeInlineEdit(channel, container, opts) {
       onEnd: () => {
         clearHighlight();
         lastNonEmptyRange = null;
+        root.forget();
         channel.post({ kind: "editEnd" });
       },
       onInsert: () => {},
@@ -6775,6 +6828,9 @@ function startIframeInlineEdit(channel, container, opts) {
     if (!el) {
       return;
     }
+    if (isPlainSession()) {
+      return;
+    }
     if (lastNonEmptyRange && lastNonEmptyRange.startContainer.isConnected && el.contains(lastNonEmptyRange.commonAncestorContainer)) {
       const sel = window.getSelection();
       el.focus();
@@ -6889,6 +6945,14 @@ function startIframeInlineEdit(channel, container, opts) {
     if (!editingAllowed()) {
       return;
     }
+    if (msg.prop !== undefined) {
+      const instance = elementForPath2(container, msg.path);
+      const marker = instance?.querySelector(`[data-jx-bound-prop="${CSS.escape(msg.prop)}"]`);
+      if (marker) {
+        activateProp(marker);
+      }
+      return;
+    }
     const el = elementForPath2(container, msg.path);
     if (el && isEditableBlock(el)) {
       root.placeCaret({ offset: msg.offset ?? 0, path: msg.path });
@@ -8166,5 +8230,5 @@ export {
   startCanvasIframe
 };
 
-//# debugId=244C80B20BAE5F4364756E2164756E21
+//# debugId=8BEF1FC0BD88A0F164756E2164756E21
 //# sourceMappingURL=iframe-entry.js.map

package/dist/studio.js

@@ -1,6 +1,6 @@
 import {
   seedPublishConnected
-} from "./chunks/studio-vdpcpada.js";
+} from "./chunks/studio-qymkxbcq.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-1d6bm7eg.js";
 import {
   CommandUnavailableError,
   chordFromEvent,
@@ -99,7 +99,7 @@ import {
   showSlashMenu,
   showSlashMenuAtRect,
   suppressBlockActionBar
-} from "./chunks/studio-yxzgjq8q.js";
+} from "./chunks/studio-qb6vy1z1.js";
 import {
   addableContexts,
   defaultCommands,
@@ -111,7 +111,7 @@ import {
   tokenLabel,
   transposeStylebookStyle,
   writeTokenOverride
-} from "./chunks/studio-a11d3a1b.js";
+} from "./chunks/studio-gfzyxa0m.js";
 import {
   DERIVE_PRESETS,
   JxColorPopover,
@@ -144,7 +144,7 @@ import {
   spNumberField,
   spTextArea,
   spTextField
-} from "./chunks/studio-hs8x23fv.js";
+} from "./chunks/studio-n9k15qdg.js";
 import {
   LitElement,
   css
@@ -160,7 +160,7 @@ import {
 import {
   initQuickSearch,
   openQuickSearch
-} from "./chunks/studio-bak2cyjr.js";
+} from "./chunks/studio-9sxn0eaa.js";
 import {
   addRecentProject,
   clearRecentProjects,
@@ -187,10 +187,10 @@ import {
   removeRecentProject,
   renderFilesTemplate,
   seedEntry
-} from "./chunks/studio-ncnet0ba.js";
+} from "./chunks/studio-jand3kjg.js";
 import {
   computeWindow
-} from "./chunks/studio-cf4rk7kv.js";
+} from "./chunks/studio-91sdrn9x.js";
 import {
   autoSyncProjectOnOpen,
   cleanupGitPanel,
@@ -211,13 +211,13 @@ import {
   registerSourceControlCommands,
   renderGitPanel,
   stripRange
-} from "./chunks/studio-4enps87v.js";
+} from "./chunks/studio-tdt7b6qb.js";
 import {
   createPanelScheduler
 } from "./chunks/studio-8jpzqk5s.js";
 import {
   selectContributedEntry
-} from "./chunks/studio-cv606rs1.js";
+} from "./chunks/studio-rz861p2b.js";
 import {
   notifySettingsDocument,
   onSettingsDocumentChanged,
@@ -238,7 +238,7 @@ import {
   renderForm,
   renderProvenanceChip,
   resolveContextPointer
-} from "./chunks/studio-zdkgwhkv.js";
+} from "./chunks/studio-rkr6pm84.js";
 import {
   validateDoc,
   validateProjectConfig
@@ -263,7 +263,7 @@ import {
   registerGridCommands,
   scanLibrary,
   uploadDirForCategory
-} from "./chunks/studio-0e4h32g6.js";
+} from "./chunks/studio-4m39t01b.js";
 import {
   live
 } from "./chunks/studio-c31yb4t6.js";
@@ -307,7 +307,7 @@ import {
   setIncludeDrafts,
   startFsSync,
   writesForTurn
-} from "./chunks/studio-x3etxs0s.js";
+} from "./chunks/studio-gqpbrrj5.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-0svvdm0a.js";
 import {
   beginActivity,
   registerActivityPanel,
   showProgressModal
-} from "./chunks/studio-3q65xvzv.js";
+} from "./chunks/studio-d1f2rqxh.js";
 import {
   currentDeploy,
   latestDeployment,
   noteDeployment,
   platformSupportsPublish
-} from "./chunks/studio-5ne8mdx9.js";
+} from "./chunks/studio-675v08qj.js";
 import {
   CATEGORIES,
   SPAN_FULL_RENDER,
@@ -439,7 +439,7 @@ import {
   timeSpan,
   timeSpanAsync,
   updateActivePanelHeaders
-} from "./chunks/studio-10s469da.js";
+} from "./chunks/studio-h6553a8h.js";
 import {
   BOTTOM_TAB_IDS,
   BUFFER_COMMIT,
@@ -606,7 +606,7 @@ import {
   updateSiteConfig,
   view,
   workspace
-} from "./chunks/studio-hk523hby.js";
+} from "./chunks/studio-kfq9ed73.js";
 import {
   classMap,
   ifDefined,
@@ -669,7 +669,7 @@ import {
   mountStillWanted,
   refreshExtensionUi,
   refreshFormats
-} from "./chunks/studio-50eed4c9.js";
+} from "./chunks/studio-40fm3hyr.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-cn9te96r.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-dsh5g8j4.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-dsh5g8j4.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-dsh5g8j4.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.1";
+var BUILD_DATE = "2026-08-24T11:52:26.010Z";
+var GIT_COMMIT = "eb4fe5d";
 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-mdgmqrry.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-b0xh7b4y.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-dsh5g8j4.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-dsh5g8j4.js");
         const created = await createFileIn2({
           content,
           dir: cut === -1 ? "." : path.slice(0, cut),
@@ -61864,5 +61876,5 @@ export {
   hasUnsavedTabs
 };
 
-//# debugId=7167B13925BF1BB364756E2164756E21
+//# debugId=C20E21297FE0976064756E2164756E21
 //# sourceMappingURL=studio.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "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.5",
+    "@jxsuite/formulas": "^0.0.11",
     "@jxsuite/markup": "^0.4.5",
-    "@jxsuite/protocol": "^1.1.2",
-    "@jxsuite/runtime": "^2.0.2",
+    "@jxsuite/protocol": "^1.2.0",
+    "@jxsuite/runtime": "^2.0.4",
     "@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/canvas/editable-actions.ts

@@ -49,6 +49,15 @@ export interface BeforeInputContext {
   atBlockEnd: boolean;
   /** The event's `data` (inserted text), empty for deletions. */
   data: string;
+  /**
+   * The caret is in a PROP-BOUND nested host — text inside a component instance that is an
+   * invertible prop binding (studio.md §8.2.5), not a block of the page document.
+   *
+   * Such a host has no `data-jx-path` of its own, so `from`/`to` are always null for it. Without
+   * this flag the null-position rule below rejected every keystroke: the caret appeared, and
+   * nothing typed into a component slot ever landed.
+   */
+  inPropHost: boolean;
 }
 
 /**
@@ -91,6 +100,20 @@ const INSERT_TEXT = new Set([
  */
 const NATIVE_FORMAT_PREFIX = "format";
 
+/**
+ * Intents refused inside a prop-bound host, because a prop value is ONE PLAIN STRING.
+ *
+ * `docs/studio/editing/writing.md` puts it as "paragraph splits are off": there is no second block
+ * for Enter to make, and a `<br>` would serialise into a value that is supposed to be a single
+ * line. Everything else — insert, delete, paste, cut, IME — is ordinary text editing on a
+ * `plaintext-only` host and runs natively.
+ *
+ * These are refused rather than re-expressed: Enter FINISHES the edit (handled as a keystroke by
+ * the editing engine, not as an input event), so the chokepoint's only job is to stop the browser
+ * inserting the newline first.
+ */
+const PROP_STRUCTURAL = new Set(["insertParagraph", "insertLineBreak"]);
+
 /**
  * Classify one `beforeinput`.
  *
@@ -124,7 +147,20 @@ export function classifyBeforeInput(ctx: BeforeInputContext): EditAction {
     return { kind: "reject" };
   }
 
-  // 2. No resolvable position means the caret is in canvas chrome or a `contenteditable="false"`
+  /*
+   * 2. A prop-bound host is editable text with NO document path — it is written back as a prop
+   * value by its own commit (`editCommitProp`), not as a block. It must be judged before the
+   * null-position rule below, which would otherwise reject it for having no path: that is exactly
+   * what made a component slot show a caret and swallow every keystroke.
+   *
+   * Nothing here is structural, so nothing is re-expressed; the browser edits the text and the
+   * session commits the string.
+   */
+  if (ctx.inPropHost) {
+    return PROP_STRUCTURAL.has(inputType) ? { kind: "reject" } : { kind: "native" };
+  }
+
+  // 3. No resolvable position means the caret is in canvas chrome or a `contenteditable="false"`
   // Island — there is no document node to write to.
   if (!from || !to) {
     return { kind: "reject" };