@jxsuite/studio 2.4.2 → 3.0.0

package/src/canvas/iframe-render.ts

@@ -13,18 +13,21 @@
 
 import {
   buildScope,
+  canvasStyleValue,
   defineElement,
   renderNode,
   runScoped,
+  setCanvasAssetResolver,
   setCanvasDelinkAnchors,
   setCanvasViewportTranspose,
   setRootMedia,
   setSkipAutoRequests,
   setSkipServerFunctions,
   setStampPropBindings,
-  transposeCanvasUnits,
 } from "@jxsuite/runtime";
+import { resolveAssetRef } from "./asset-resolve";
 import { classifyRenderNode, serializeJxPath } from "./path-mapping";
+import type { AssetContext } from "./asset-resolve";
 import { SITE_STYLE_ID, buildSiteStyleCSS } from "./site-style-css";
 import type { CanvasMode } from "./iframe-protocol";
 import type { JxDocument } from "@jxsuite/schema/types";
@@ -409,7 +412,9 @@ export function applySiteStyle(
     existing?.remove();
     return;
   }
-  const css = buildSiteStyleCSS(siteStyle, mediaQueries, transposeCanvasUnits);
+  /* `canvasStyleValue`, not `transposeCanvasUnits`: the site style block is CSS the canvas emits
+     itself, so a `url()` in it needs the same asset resolution every other declaration gets. */
+  const css = buildSiteStyleCSS(siteStyle, mediaQueries, canvasStyleValue);
   if (existing) {
     existing.textContent = css;
     return;
@@ -434,7 +439,7 @@ export function applyPreviewColorScheme(doc: Document, scheme: "light" | "dark"
 }
 
 /** Inject the document's `$head` (link/meta/script) into the iframe's <head>, de-duped by href/src. */
-export function injectHead(doc: JxDocument): void {
+export function injectHead(doc: JxDocument, assets: AssetContext | null = null): void {
   const head = (doc as { $head?: HeadEntry[] }).$head;
   if (!Array.isArray(head)) {
     return;
@@ -451,14 +456,16 @@ export function injectHead(doc: JxDocument): void {
     const attrs = { ...entry.attributes } as Record<string, unknown>;
     for (const key of ["href", "src"]) {
       const val = attrs[key];
-      if (
-        typeof val === "string" &&
-        !val.startsWith("/") &&
-        !val.startsWith(".") &&
-        !val.startsWith("http")
-      ) {
+      if (typeof val !== "string" || val === "") {
+        continue;
+      }
+      if (!val.startsWith("/") && !val.startsWith(".") && !val.startsWith("http")) {
+        /* The bare-specifier lane owns `/node_modules/<pkg>` — the HOST's URL space, not the
+           project's. A project resolver has nothing to resolve it to, so it never sees it. */
         attrs[key] = `/node_modules/${val}`;
+        continue;
       }
+      attrs[key] = resolveAssetRef(val, assets) ?? val;
     }
     const sel = `${tag}${attrs.href ? `[href="${String(attrs.href)}"]` : ""}${attrs.src ? `[src="${String(attrs.src)}"]` : ""}`;
     if (sel !== tag && document.head.querySelector(sel)) {
@@ -620,9 +627,20 @@ export async function renderResolvedDocument(opts: {
   mode: CanvasMode;
   mapperCtx: PathMapCtx;
   siteStyle?: Record<string, unknown> | null;
+  /**
+   * How this host addresses project media, or null when the canvas origin serves the site's own URL
+   * space (desktop, `jx dev`) and references need no resolution at all.
+   */
+  assets?: AssetContext | null;
   /** This render may fetch automatic `Request` entries even outside preview (Data-panel Refresh). */
   allowAutoRequests?: boolean;
 }): Promise<RenderHandle> {
+  /* FIRST, before anything emits CSS or an attribute. The resolver is module-global in the runtime,
+     so it is set on every render — including to null — or a previous document's context would
+     resolve this one's references. It cannot cross the realm as a function, which is why the parent
+     posts the plain-data context and the resolver is closed over it here. */
+  const assets = opts.assets ?? null;
+  setCanvasAssetResolver(assets ? (value) => resolveAssetRef(value, assets) : null);
   setSkipServerFunctions(opts.mode !== "preview");
   // Same gate for automatic `$prototype: "Request"` state entries. `buildScope` re-resolves every
   // State entry on each full render, so without this an escalating authoring action (a signals-panel
@@ -644,7 +662,7 @@ export async function renderResolvedDocument(opts: {
   // Component internals get stamped).
   setStampPropBindings(opts.mode === "design" || opts.mode === "edit");
   applySiteStyle(opts.siteStyle, (opts.doc as { $media?: Record<string, string> }).$media ?? {});
-  injectHead(opts.doc);
+  injectHead(opts.doc, assets);
   syncEditModeCss(opts.container.ownerDocument, opts.mode);
   syncPreviewShell(opts.container.ownerDocument, opts.mode);
   syncStylebookCss(opts.container.ownerDocument, opts.mode);

package/src/canvas/site-style-css.ts

@@ -9,7 +9,7 @@
  * honors both the OS preference and the preview toggle.
  */
 
-import { pureSchemeOf, schemeSelectors, camelToKebab } from "@jxsuite/runtime";
+import { pureSchemeOf, resolveAtQuery, schemeSelectors, camelToKebab } from "@jxsuite/runtime";
 
 /** Id of the injected site-style tag (replace-in-place, never accumulate). */
 export const SITE_STYLE_ID = "jx-site-style";
@@ -70,11 +70,7 @@ export function buildSiteStyleCSS(
   }
 
   for (const [atKey, block] of condBlocks) {
-    const query = atKey.startsWith("@--")
-      ? (mediaQueries[atKey.slice(1)] ?? atKey.slice(1))
-      : atKey.startsWith("@(")
-        ? atKey.slice(1)
-        : null;
+    const query = resolveAtQuery(atKey, mediaQueries);
     if (query === null) {
       continue;
     }

package/src/editor/file-drop-action.ts

@@ -27,6 +27,7 @@ import type { DropPreview, FileDropHit } from "../canvas/iframe-protocol";
 import type { JxPath } from "../state";
 import type { Tab } from "../tabs/tab";
 import type { JxMutableNode } from "@jxsuite/schema/types";
+import { isMediaFormat } from "../utils/studio-utils";
 
 /** Where an asset's URL goes when it replaces an existing element's picture. */
 const REPLACE_ATTRS: Record<string, "src" | "poster"> = {
@@ -71,7 +72,7 @@ export function resolveFileDropTarget(
   }
   if (hit.tagName.includes("-")) {
     const entry = registry.find((c) => c.tagName === hit.tagName);
-    const imageProps = (entry?.props ?? []).filter((p) => p.format === "image");
+    const imageProps = (entry?.props ?? []).filter((p) => isMediaFormat(p.format));
     if (imageProps.length === 1) {
       return { mode: "replace-prop", path: hit.path as JxPath, prop: imageProps[0]!.name };
     }

package/src/files/files.ts

@@ -36,7 +36,7 @@ import { maybePromptJxsuiteUpdate } from "../packages/jxsuite-update";
 import { autoSyncProjectOnOpen } from "../packages/pull-package-sync";
 import { markLocalMutation } from "./fs-events";
 import { registerPanel } from "../panels/panel-registry";
-import { UPLOAD_ACCEPT, isImage, uploadAssets } from "./media-upload";
+import { isImage, uploadAccept, uploadAssets } from "./media-upload";
 import { isCollabPath } from "../collab/collab-state";
 import {
   draggable,
@@ -994,7 +994,7 @@ export function pickAndUploadTo(dir: string, renderLeftPanel: () => void): void
   const input = document.createElement("input");
   input.type = "file";
   input.multiple = true;
-  input.accept = UPLOAD_ACCEPT;
+  input.accept = uploadAccept();
   input.addEventListener("change", () => {
     if (input.files?.length) {
       void uploadFilesToDir(input.files, dir, renderLeftPanel);

package/src/files/media-paths.ts

@@ -25,27 +25,22 @@
  * as written rather than on the file as stored.
  *
  * Everything here is pure string math over project-relative, forward-slashed paths. The only input
- * from outside is the open project's content sections, read the same way `content-assets.ts` reads
- * them.
+ * from outside is the open project's content sections, read the same way `canvas/asset-refs.ts`
+ * reads them.
  *
  * @docs studio/projects/media
  */
 
-import { contentMountFor } from "../canvas/content-assets";
+import { encodeProjectPath, normalizeProjectPath, PUBLIC_DIR } from "@jxsuite/schema/asset-paths";
+import { contentMountFor, hostAssetDeclarations, projectLocales } from "../canvas/asset-refs";
+import { loopbackAssetSrc } from "../canvas/canvas-origin";
 import { projectState } from "../store";
 import type { AssetMount } from "@jxsuite/schema/asset-paths";
 import type { ContentSectionEntry } from "../types";
 
-/** The directory whose contents are served from the site root. */
-const PUBLIC_DIR = "public";
-
-/**
- * A project-relative path in the one spelling every function here expects: forward slashes, no `./`
- * prefix, no leading `/`, no trailing `/`.
- */
-export function normalizeProjectPath(path: string): string {
-  return path.replaceAll("\\", "/").replace(/^\.\//, "").replace(/^\/+/, "").replace(/\/+$/, "");
-}
+/* Re-exported rather than redefined: the same normalization is what the compiler, the servers and
+   the canvas resolver all key on, so there is one definition of it in `@jxsuite/schema`. */
+export { normalizeProjectPath } from "@jxsuite/schema/asset-paths";
 
 /** The filename of a project-relative path. */
 export function baseName(path: string): string {
@@ -75,7 +70,7 @@ function contentSections(): Record<string, ContentSectionEntry> | null {
  * rather than duplicating the loop.
  */
 function mountOf(path: string): AssetMount | null {
-  return contentMountFor(path, contentSections());
+  return contentMountFor(path, contentSections(), projectLocales());
 }
 
 /**
@@ -139,3 +134,31 @@ export function authoredRefTargets(path: string): string[] {
   }
   return targets;
 }
+
+/**
+ * The src a PARENT-REALM preview should load for a PROJECT FILE PATH — a library thumbnail, a
+ * media-browser tile.
+ *
+ * The sibling of `previewAssetSrc` in `canvas/asset-refs`, and separate from it because the two
+ * take different things and confusing them is silent. A file path is NOT an authored reference:
+ * `public/hero.jpg` is written `/hero.jpg`, a string that shares not one segment with it. The
+ * library grid built its `<img src>` by prefixing the path with a slash, so every `public/` image
+ * asked for `/public/hero.jpg` — a URL the site does not publish — and every content-collection
+ * image skipped its mount entirely.
+ *
+ * @param {string} path - A project-relative file path, as the file tree spells it
+ * @returns {string} A src the parent realm can load
+ */
+export function previewFileSrc(path: string): string {
+  const normalized = normalizeProjectPath(path);
+  if (normalized === "") {
+    return path;
+  }
+  /* In repo space nothing answers a site URL, so the site URL is the wrong question entirely: the
+     host serves the FILE, at its own path, under the declared base. */
+  const { space, fileBaseUrl } = hostAssetDeclarations();
+  if (space === "repo") {
+    return `${fileBaseUrl}${encodeProjectPath(normalized)}`;
+  }
+  return loopbackAssetSrc(mediaSiteUrl(normalized));
+}

package/src/files/media-upload.ts

@@ -17,7 +17,7 @@
  */
 
 import { errorMessage } from "@jxsuite/schema/parse";
-import { getPlatform } from "../platform";
+import { getPlatform, hasPlatform } from "../platform";
 import { notify } from "../services/notify";
 import { activeTab } from "../workspace/workspace";
 
@@ -50,8 +50,20 @@ export const MEDIA_EXTENSIONS = new Set([
   ".otf",
 ]);
 
-/** The `accept` attribute for every upload file input. */
-export const UPLOAD_ACCEPT = [
+/** A byte count as a person reads it, for a refusal that names the limit. */
+function formatBytes(bytes: number): string {
+  const units = ["B", "KB", "MB", "GB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${unit === 0 ? value : Number(value.toFixed(1))} ${units[unit]}`;
+}
+
+/** What Studio itself offers, before any backend narrows it. */
+const DEFAULT_ACCEPT = [
   "image/*",
   "video/*",
   "audio/*",
@@ -63,6 +75,20 @@ export const UPLOAD_ACCEPT = [
   ".otf",
 ].join(",");
 
+/**
+ * The `accept` attribute for every upload file input.
+ *
+ * A backend may NARROW it by declaring `assetCapabilities.accept`; nothing widens it, because the
+ * picker offering a type Studio cannot place in a document helps no one. Read as a function, not a
+ * constant, because the platform is registered after this module is imported.
+ *
+ * @returns {string} An `<input accept>` value
+ */
+export function uploadAccept(): string {
+  const declared = hasPlatform() ? getPlatform().assetCapabilities?.accept : undefined;
+  return declared ?? DEFAULT_ACCEPT;
+}
+
 /** What kind of element an uploaded asset wants to become. */
 export type AssetKind = "image" | "video" | "audio" | "file";
 
@@ -225,18 +251,33 @@ export async function uploadAssets(
     taken = new Set(); // Directory doesn't exist yet — the backend mkdir -p's on write.
   }
 
+  /* A DECLARED limit, or none. Studio must not invent one: a limit it made up is a file the user
+     cannot upload for no reason anyone can name. A declared one is different — refusing here saves
+     the round trip and lets the refusal say the number. */
+  const maxBytes = hasPlatform() ? getPlatform().assetCapabilities?.maxUploadBytes : undefined;
+
   const uploaded: UploadedAsset[] = [];
   for (const file of list) {
+    if (maxBytes !== undefined && file.size > maxBytes) {
+      notify.error(`${file.name} is too large.`, {
+        detail: `This backend accepts at most ${formatBytes(maxBytes)}; that file is ${formatBytes(file.size)}.`,
+        source: "Media",
+      });
+      continue;
+    }
     const name = uniqueName(file.name, taken);
     taken.add(name);
-    const path = joinDir(dir, name);
+    const requested = joinDir(dir, name);
     try {
-      await platform.uploadFile(path, file);
+      /* The path the backend REPORTS, not the one asked for. A store that de-duplicates by content
+         hash, appends a collision suffix, or normalizes a name writes somewhere else, and the
+         reference that goes into the document has to name what is really there. */
+      const { path } = await platform.uploadFile(requested, file);
       uploaded.push({ kind: mediaKind(file), name, path, ref: assetRef(path) });
     } catch (error) {
       notify.error(`Could not upload ${file.name}.`, {
         detail: errorMessage(error),
-        path,
+        path: requested,
         source: "Media",
       });
     }

package/src/grid/grid-idle.ts

@@ -0,0 +1,45 @@
+/**
+ * Grid-idle.ts — the grid's quiescence registry, and nothing else.
+ *
+ * A separate module from `grid-view.ts` for one reason: `services/idle.ts` must be able to ASK
+ * whether any grid is mid-flight without pulling Tabulator into its import graph. It read the
+ * probes from `grid-view.ts` first, and `grid-view.ts` imports `tabulator-tables` at module load —
+ * so every test that transitively reached `idle.ts` (which is most of them, through the shell)
+ * tried to evaluate the Tabulator ESM bundle and died with `Export named 'ClipboardModule' not
+ * found` unless it had thought to mock a module it never uses.
+ *
+ * So the dependency points the other way: this file imports nothing, `idle.ts` reads it, and
+ * `grid-view.ts` writes to it.
+ */
+
+/** Answers `null` when its grid is settled, or a human-readable reason when it is not. */
+export type GridProbe = () => string | null;
+
+const liveGrids = new Set<GridProbe>();
+
+/** Register a live grid. The returned function deregisters it — call it from `destroy()`. */
+export function registerGridProbe(probe: GridProbe): () => void {
+  liveGrids.add(probe);
+  return () => liveGrids.delete(probe);
+}
+
+/**
+ * Grids still building, or still laying out their selection range.
+ *
+ * A probe must never throw: it runs inside the idle predicate, and an exception there would be
+ * indistinguishable from a subsystem that never settles.
+ */
+export function gridIdleBlockers(): readonly string[] {
+  const blockers: string[] = [];
+  for (const probe of liveGrids) {
+    try {
+      const reason = probe();
+      if (reason) {
+        blockers.push(reason);
+      }
+    } catch {
+      // A table torn down between registration and probe is settled by definition.
+    }
+  }
+  return blockers;
+}

package/src/grid/grid-view.ts

@@ -40,6 +40,7 @@ import type {
 } from "tabulator-tables";
 import type { GridCellValue, GridColumn } from "./grid-source";
 import type { GridController } from "./grid-controller";
+import { registerGridProbe } from "./grid-idle";
 
 export interface GridView {
   /** Re-pull controller.effectiveRows() into the table (buffer → table sync). */
@@ -222,6 +223,23 @@ export function createGridView(host: HTMLElement, controller: GridController): G
     }
   });
 
+  /*
+   * Settled means BUILT AND LAID OUT, not merely constructed. `selectableRange: 1` gives a
+   * non-empty table an initial range, and that range's outline is a rendered element — so until it
+   * exists the picture is still changing. An empty table is exempt, because it never gets one and
+   * waiting for it would be waiting forever.
+   */
+  const probe = (): string | null => {
+    if (!built) {
+      return `grid[${gridId}]: building`;
+    }
+    if (controller.effectiveRows().length > 0 && table.getRanges().length === 0) {
+      return `grid[${gridId}]: selection range not laid out`;
+    }
+    return null;
+  };
+  const unregisterProbe = registerGridProbe(probe);
+
   table.on("cellEdited", (cell: CellComponent) => {
     if (suppress) {
       return;
@@ -307,6 +325,9 @@ export function createGridView(host: HTMLElement, controller: GridController): G
 
   return {
     destroy() {
+      // Before `table.destroy()`: a probe left registered against a torn-down table would be asking
+      // Tabulator questions it can no longer answer.
+      unregisterProbe();
       controller.bindView(null);
       table.destroy();
     },

package/src/grid/schema-columns.ts

@@ -10,6 +10,7 @@
  */
 import type { GridCellValue, GridColumn, GridColumnKind } from "./grid-source";
 import type { JsonSchema } from "../ui/schema-form";
+import { isMediaFormat } from "../utils/studio-utils";
 
 /** JSON-Schema property as it appears in content-type schemas (superset of ui JsonSchema). */
 interface PropSchema extends JsonSchema {
@@ -44,7 +45,7 @@ export function kindForProp(prop: PropSchema): GridColumnKind {
     return "enum";
   }
   const format = prop.type === "array" ? undefined : prop.format;
-  if (format === "image") {
+  if (isMediaFormat(format)) {
     return "image";
   }
   if (format === "date" || format === "date-time") {

package/src/grid/sources/content-source.ts

@@ -269,20 +269,41 @@ function buildEntryFileSource(opts: EntryFileSourceOptions): GridSource {
       const files = await opts.list();
       entries.clear();
       columnsCache = null;
-      await mapLimit(files, 8, async (path) => {
+      /*
+       * Read concurrently, INSERT IN ORDER.
+       *
+       * `entries` is a Map and the grid renders it in insertion order, so setting it from inside
+       * the worker made row order the order the reads happened to FINISH in — which is a race
+       * between two `platform.readFile` calls, not a property of the collection. The two posts in
+       * the `first-collection` fixture swapped places between runs, and that alone rewrote
+       * `blog-grid.png` in 3 of the 21 images the screenshot lane pushed over 24 commits.
+       *
+       * `mapLimit` already documents that it preserves item order; the fix is to USE its result
+       * rather than to mutate shared state from inside it. The concurrency is worth keeping — a
+       * collection is a directory of files and reading it eight at a time is why the grid opens
+       * quickly.
+       */
+      const loaded = await mapLimit(files, 8, async (path): Promise<EntryRecord | null> => {
         try {
           const text = await platform.readFile(path);
           const parsed = await parseSourceForPath(path, text);
-          entries.set(path, {
+          return {
             document: parsed.document,
             formatName: parsed.format.name,
             frontmatter: parsed.frontmatter ?? {},
             rawText: text,
-          });
+          };
         } catch {
           // Unparseable entry — leave it out rather than failing the whole grid.
+          return null;
         }
       });
+      for (const [index, path] of files.entries()) {
+        const record = loaded[index];
+        if (record) {
+          entries.set(path, record);
+        }
+      }
     })();
     return loadPromise;
   };

package/src/new-project/import-tab.ts

@@ -8,7 +8,8 @@
 
 import { html } from "lit-html";
 import { getPlatform } from "../platform";
-import { getBaseUrl, getModel, getOpenAiKey } from "../services/ai-settings";
+import { getBaseUrl, getOpenAiKey } from "../services/ai-settings";
+import { preferredModel } from "../services/ai-models";
 import { IMPORT_WARNING_PHASE } from "../services/import-client";
 import { notify } from "../services/notify";
 import { errorMessage } from "@jxsuite/schema/parse";
@@ -148,7 +149,7 @@ export async function startImport(ctx: ImportTabCtx) {
   try {
     const key = getOpenAiKey();
     const baseUrl = getBaseUrl();
-    const model = getModel();
+    const model = preferredModel();
     const result = await platform.importSite(
       {
         url: parsed.href,

package/src/panels/ai-chat/composer.ts

@@ -20,13 +20,18 @@ import type { TemplateResult } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { ref } from "lit-html/directives/ref.js";
 import { getNodeAtPath } from "../../state";
-import { fetchAvailableModels } from "../../services/ai-models";
-import { getModel, setModel } from "../../services/ai-settings";
+import {
+  aiConnection,
+  cachedModels,
+  fetchAvailableModels,
+  preferredModel,
+} from "../../services/ai-models";
+import { setModel } from "../../services/ai-settings";
 import { activeTab } from "../../workspace/workspace";
 import { primarySelection } from "../../tabs/selection";
 import { buildMessageWithContext } from "./attached-context";
 import type { ContextChip } from "./attached-context";
-import type { AiModel } from "../../services/ai-models";
+import type { AiCredentials } from "../../services/ai-models";
 import type { JxMutableNode } from "@jxsuite/schema/types";
 
 /** Tallest the textarea auto-grows before it scrolls internally. */
@@ -72,24 +77,36 @@ export function createComposer(opts: ComposerOptions): Composer {
   let chips: ContextChip[] = [];
 
   /** Null until the first fetch settles; kept on error so the picker can offer Retry. */
-  let models: AiModel[] | null = null;
   let modelsLoading = false;
   let modelsError = "";
 
+  /**
+   * The connection the last fetch was made for, so a failure is not retried on every render.
+   *
+   * The list itself is NOT held here. A private copy is how the picker came to show one provider's
+   * catalogue while another was configured: it was filled once and never reconsidered. Reading it
+   * from `cachedModels(connection)` means a list can only ever be shown for the credentials it was
+   * listed under, and a credential change makes it unavailable rather than stale.
+   */
+  let attempted: AiCredentials | null = null;
+
   // ── Model picker ──────────────────────────────────────────────────────
 
+  function sameConnection(a: AiCredentials | null, b: AiCredentials): boolean {
+    return a !== null && a.apiKey === b.apiKey && a.baseUrl === b.baseUrl;
+  }
+
   function ensureModels(force = false) {
-    if (modelsLoading || (models !== null && !force)) {
+    const credentials = aiConnection();
+    const settled = cachedModels(credentials) !== null || sameConnection(attempted, credentials);
+    if (modelsLoading || (settled && !force)) {
       return;
     }
     modelsLoading = true;
     modelsError = "";
-    fetchAvailableModels({ force })
-      .then((list) => {
-        models = list;
-      })
+    attempted = credentials;
+    fetchAvailableModels({ credentials, force })
       .catch((error: unknown) => {
-        models = [];
         modelsError = (error as Error).message || "Failed to fetch models";
       })
       .finally(() => {
@@ -101,7 +118,7 @@ export function createComposer(opts: ComposerOptions): Composer {
   function onModelChange(e: Event) {
     const { value } = e.target as HTMLInputElement;
     if (value === RETRY_MODELS) {
-      models = null;
+      attempted = null;
       ensureModels(true);
       // Re-render so the picker snaps back to the stored model instead of "Retry".
       opts.requestRender();
@@ -114,8 +131,8 @@ export function createComposer(opts: ComposerOptions): Composer {
 
   function renderModelPicker(): TemplateResult {
     ensureModels();
-    const current = getModel();
-    const listed = models ?? [];
+    const current = preferredModel();
+    const listed = cachedModels(aiConnection()) ?? [];
     const items = listed.some((m) => m.id === current)
       ? listed
       : [{ id: current, name: current }, ...listed];

package/src/panels/frontmatter-fields.ts

@@ -14,7 +14,7 @@ import { renderFieldRow } from "../ui/field-row";
 import { spNumberField, spTextField } from "../ui/field-input";
 import { renderMediaPicker } from "../ui/media-picker";
 import { mutateUpdateFrontmatter, transactDoc } from "../tabs/transact";
-import { findContentTypeSchema } from "../utils/studio-utils";
+import { findContentTypeSchema, isMediaFormat } from "../utils/studio-utils";
 import { NULL_FORM_CONTEXT, getFormControl, referenceTarget } from "../ui/schema-form";
 import type { JsonSchema } from "../ui/schema-form";
 
@@ -233,7 +233,11 @@ export function renderFmField(
     });
   }
 
-  if (entry.format === "image") {
+  /* Both spellings. `"uri-reference"` is the one the SPEC uses and the one the content loader keys
+     its asset rewrite on (`rewriteEntryAssets`), so a schema written against the spec got a plain
+     text box here while the same field got a media picker in the properties panel — which reads
+     `inferInputType`, and that has always accepted it. */
+  if (isMediaFormat(entry.format)) {
     return renderFieldRow({
       hasValue: hasVal,
       label: displayLabel,

package/src/panels/properties-panel.ts

@@ -49,7 +49,13 @@ import { renderFieldRow, renderKvRow } from "../ui/field-row";
 import type { FieldProvenance } from "./provenance";
 import { renderDynamicSlot, slotMode } from "../ui/dynamic-slot";
 import { spTextArea, spTextField } from "../ui/field-input";
-import { attrLabel, camelToLabel, inferInputType, parseCemType } from "../utils/studio-utils";
+import {
+  attrLabel,
+  camelToLabel,
+  inferInputType,
+  isMediaFormat,
+  parseCemType,
+} from "../utils/studio-utils";
 import { classifyHref, composeHref } from "../utils/link-target";
 import type { LinkKind } from "../utils/link-target";
 import {
@@ -274,7 +280,7 @@ function renderComponentPropsFieldsTemplate(
       /** @type {ReturnType<typeof setTimeout> | undefined} */
       let debounce: ReturnType<typeof setTimeout> | undefined;
       let widgetTpl;
-      if (prop.format === "image") {
+      if (isMediaFormat(prop.format)) {
         widgetTpl = renderMediaPicker(prop.name, staticVal, onChange);
       } else if (prop.format === "color") {
         widgetTpl = renderColorSelector(prop.name, staticVal, onChange);

package/src/panels/seo-modal.ts

@@ -24,8 +24,7 @@
 
 import { html, nothing } from "lit-html";
 import { activeRegistry } from "../commands/active-registry";
-import { loopbackAssetSrc } from "../canvas/canvas-origin";
-import { previewAssetSrc } from "../canvas/content-assets";
+import { previewAssetSrc } from "../canvas/asset-refs";
 import { renderFieldRow } from "../ui/field-row";
 import { renderMediaPicker } from "../ui/media-picker";
 import { renderProvenanceChip } from "./provenance";
@@ -140,9 +139,9 @@ function serpCard(preview: SeoPreview): TemplateResult {
 /**
  * The mock social card.
  *
- * The image is resolved the same way every other image in the studio chrome is —
- * `loopbackAssetSrc(previewAssetSrc(…))` — so a content-relative `./images/hero.jpg` previews at
- * its asset-mount URL while the authored ref stays exactly as written.
+ * The image is resolved the same way every other image in the studio chrome is — `previewAssetSrc`
+ * — so a content-relative `./images/hero.jpg` previews at its asset-mount URL while the authored
+ * ref stays exactly as written.
  */
 function socialCard(preview: SeoPreview): TemplateResult {
   const image = seoField(preview, "og:image").value.trim();
@@ -152,7 +151,7 @@ function socialCard(preview: SeoPreview): TemplateResult {
       <div class="seo-social-media">
         ${
           image
-            ? html`<img src=${loopbackAssetSrc(previewAssetSrc(image))} alt="" />`
+            ? html`<img src=${previewAssetSrc(image)} alt="" />`
             : html`<span class="seo-unset">No image</span>`
         }
       </div>