@jxsuite/studio 6.1.2 → 8.0.0

package/src/files/media-types.ts

@@ -0,0 +1,55 @@
+/**
+ * Which files are project media, by extension — the classification alone, with nothing imported.
+ *
+ * `files/media-upload.ts` owns uploading and re-exports these; they live here so a module that only
+ * needs to ask "is this file media" (the collection matcher behind the Content workspace, which the
+ * canvas resolver reads too) does not pull the upload core, the platform and the reference index in
+ * behind the question.
+ *
+ * @docs studio/projects/media
+ */
+
+/** Extensions rendered as a thumbnail (media picker, cards, file-tree icons). */
+export const IMAGE_EXTENSIONS = new Set([
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif",
+  ".svg",
+  ".webp",
+  ".avif",
+  ".ico",
+]);
+
+/** Extensions an upload places as a `<video>`. */
+export const VIDEO_EXTENSIONS = new Set([".mp4", ".webm", ".mov", ".m4v"]);
+
+/** Extensions an upload places as an `<audio>`. */
+export const AUDIO_EXTENSIONS = new Set([".mp3", ".wav", ".ogg", ".m4a", ".flac"]);
+
+/**
+ * Every extension Studio treats as project media: a superset of {@link IMAGE_EXTENSIONS} and of
+ * every extension classified as video or audio, so a file it classifies is one the media listing
+ * shows.
+ */
+export const MEDIA_EXTENSIONS = new Set([
+  ...IMAGE_EXTENSIONS,
+  ...VIDEO_EXTENSIONS,
+  ...AUDIO_EXTENSIONS,
+  ".pdf",
+  ".woff",
+  ".woff2",
+  ".ttf",
+  ".otf",
+]);
+
+/** Lowercased extension including the dot, or `""` when the name carries none. */
+export function extensionOf(name: string): string {
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(dot).toLowerCase() : "";
+}
+
+/** Whether a file extension (with or without the leading dot) is a previewable image. */
+export function isImage(ext: string): boolean {
+  return IMAGE_EXTENSIONS.has(ext.startsWith(".") ? ext.toLowerCase() : `.${ext.toLowerCase()}`);
+}

package/src/files/media-upload.ts

@@ -3,15 +3,18 @@
  * Media upload core — the single path every upload surface goes through.
  *
  * Four surfaces feed it: the image field's Upload button (ui/media-picker), a file dropped on the
- * canvas (editor/file-drop-action), a file dropped on the Files tree (files/files), and the Manage
- * view's drop zone / Upload button (browse/browse). They differ only in how the destination
- * directory is chosen; naming, collision handling, the platform call, and cache invalidation are
- * shared here.
+ * canvas (editor/file-drop-action), a file dropped on the Files tree (files/files), and the Media
+ * workspace's drop zone and Upload button (media/media-library, and Add new › Media). They differ
+ * only in how the destination directory is chosen; naming, collision handling, the platform call,
+ * and cache invalidation are shared here.
  *
- * Destination (specs/site-architecture.md §9.1/§9.3): a document inside a content collection keeps
- * its media co-located in `content/<collection>/images/` — the entry references it file-relatively
- * and the collection loader rewrites it to the asset mount. Everything else goes to `public/`,
- * which is served from the site root.
+ * Destination (specs/site-architecture.md §9.1/§9.4, studio.md §9.3): a document inside a content
+ * collection keeps its media co-located in `content/<collection>/images/` — the entry references it
+ * file-relatively and the collection loader rewrites it to the asset mount. Everything else goes to
+ * {@link DEFAULT_MEDIA_DIR}, `public/media/`, which is served from the site root as `/media/`.
+ *
+ * {@link replaceAsset} is the one door that writes over an existing file, and it is asked for by
+ * name: the Media workspace's **Replace** (studio.md §9.3).
  *
  * @docs studio/projects/media
  */
@@ -19,37 +22,22 @@
 import { errorMessage } from "@jxsuite/schema/parse";
 import { getPlatform, hasPlatform } from "../platform";
 import { notify } from "../services/notify";
+import { invalidateUsages } from "../services/references";
 import { activeTab } from "../workspace/workspace";
 import { forgetVersions, notedListing } from "./asset-versions";
+import {
+  AUDIO_EXTENSIONS,
+  IMAGE_EXTENSIONS,
+  MEDIA_EXTENSIONS,
+  VIDEO_EXTENSIONS,
+  extensionOf,
+} from "./media-types";
 
 // ─── File classification ─────────────────────────────────────────────────────
 
-/** Extensions rendered as a thumbnail (media picker, Manage cards, file-tree icons). */
-export const IMAGE_EXTENSIONS = new Set([
-  ".jpg",
-  ".jpeg",
-  ".png",
-  ".gif",
-  ".svg",
-  ".webp",
-  ".avif",
-  ".ico",
-]);
-
-/** Every extension Studio treats as project media. Superset of {@link IMAGE_EXTENSIONS}. */
-export const MEDIA_EXTENSIONS = new Set([
-  ...IMAGE_EXTENSIONS,
-  ".mp4",
-  ".webm",
-  ".mp3",
-  ".wav",
-  ".ogg",
-  ".pdf",
-  ".woff",
-  ".woff2",
-  ".ttf",
-  ".otf",
-]);
+/* The classification lives in `media-types.ts`, which imports nothing; it is re-exported here so
+   every existing caller of the upload core keeps one import. */
+export { IMAGE_EXTENSIONS, MEDIA_EXTENSIONS, extensionOf, isImage } from "./media-types";
 
 /** A byte count as a person reads it, for a refusal that names the limit. */
 function formatBytes(bytes: number): string {
@@ -104,25 +92,11 @@ export interface UploadedAsset {
   kind: AssetKind;
 }
 
-/** Lowercased extension including the dot, or `""` when the name carries none. */
-export function extensionOf(name: string): string {
-  const dot = name.lastIndexOf(".");
-  return dot > 0 ? name.slice(dot).toLowerCase() : "";
-}
-
-/** Whether a file extension (with or without the leading dot) is a previewable image. */
-export function isImage(ext: string): boolean {
-  return IMAGE_EXTENSIONS.has(ext.startsWith(".") ? ext.toLowerCase() : `.${ext.toLowerCase()}`);
-}
-
 /** Whether a filename is project media. */
 export function isMediaFile(name: string): boolean {
   return MEDIA_EXTENSIONS.has(extensionOf(name));
 }
 
-const VIDEO_EXTENSIONS = new Set([".mp4", ".webm", ".mov", ".m4v"]);
-const AUDIO_EXTENSIONS = new Set([".mp3", ".wav", ".ogg", ".m4a", ".flac"]);
-
 /**
  * Classify a file by MIME type, falling back to its extension. A drop from the OS usually carries a
  * `type`, but it is empty for unrecognized extensions and for some Linux file managers.
@@ -151,18 +125,59 @@ export function mediaKind(file: { name: string; type?: string }): AssetKind {
   return "file";
 }
 
+/** The font extensions, which a browser shows as a specimen rather than as a file. */
+export const FONT_EXTENSIONS: ReadonlySet<string> = new Set([".woff", ".woff2", ".ttf", ".otf"]);
+
+/**
+ * What a media file IS, as the Media workspace's filters name it: one of five kinds.
+ *
+ * Distinct from {@link AssetKind}, which answers "what element does this become" and so has no word
+ * for a font or a PDF (both become an `<a href>`). Decided by extension alone, because a file
+ * already on disk carries no MIME type: a font first, then the three a browser has an element for,
+ * and everything else (a PDF) is a document.
+ */
+export type MediaFileKind = "image" | "video" | "audio" | "font" | "document";
+
+/** The {@link MediaFileKind} of a file, by its name. */
+export function mediaFileKind(name: string): MediaFileKind {
+  if (FONT_EXTENSIONS.has(extensionOf(name))) {
+    return "font";
+  }
+  const kind = mediaKind({ name });
+  return kind === "file" ? "document" : kind;
+}
+
 // ─── Destination resolution ──────────────────────────────────────────────────
 
 /** Matches a path inside a content collection: `content/<collection>/…`. */
 const CONTENT_ENTRY = /^content\/([^/]+)\//;
 
+/**
+ * Where media with no context lands: `public/media/`, referenced from the site root as `/media/…`.
+ *
+ * A default and not a rule (site-architecture.md §9.4): a file under any other `public/` path is
+ * published and listed exactly the same. Its one definition, so the Media workspace, Add new ›
+ * Media and the Library's All view cannot disagree about it.
+ */
+export const DEFAULT_MEDIA_DIR = "public/media";
+
 /**
  * The directory an upload lands in when the caller doesn't name one. A document inside a content
- * collection gets `content/<collection>/images`; everything else gets `public`.
+ * collection gets `content/<collection>/images`; everything else gets {@link DEFAULT_MEDIA_DIR}.
  */
 export function uploadDirFor(documentPath: string | null): string {
   const match = documentPath ? CONTENT_ENTRY.exec(documentPath.replaceAll("\\", "/")) : null;
-  return match ? `content/${match[1]}/images` : "public";
+  return match ? `content/${match[1]}/images` : DEFAULT_MEDIA_DIR;
+}
+
+/**
+ * Whether `dir` is a folder {@link uploadDirFor} answers: `public/media`, or a collection's
+ * `content/<collection>/images`. An upload creates these on its own, so they are the folders a
+ * media delete takes away again once it has emptied them (`media/media-library.ts`).
+ */
+export function isUploadDestination(dir: string): boolean {
+  const normalized = dir.replaceAll("\\", "/");
+  return normalized === DEFAULT_MEDIA_DIR || /^content\/[^/]+\/images$/.test(normalized);
 }
 
 /**
@@ -223,8 +238,61 @@ export function setMediaChangedHandler(fn: ((dir: string) => void | Promise<void
   mediaChangedHandler = fn;
 }
 
+/**
+ * Say that the media in `dir` changed by some door other than {@link uploadAssets} — a replace, or
+ * the Media workspace's delete — so every cache keyed on the listing is dropped the same way.
+ */
+export async function announceMediaChanged(dir: string): Promise<void> {
+  await mediaChangedHandler?.(dir);
+}
+
+/** The directory part of a project path, `.` for a file at the root. */
+function parentDir(path: string): string {
+  const normalized = path.replaceAll("\\", "/");
+  const slash = normalized.lastIndexOf("/");
+  return slash > 0 ? normalized.slice(0, slash) : ".";
+}
+
 // ─── Upload ──────────────────────────────────────────────────────────────────
 
+/**
+ * What a media surface may upload: any file the media listing shows (`media`), or only pictures
+ * (`image`, a picker for a field that holds one).
+ *
+ * A file input's `accept` narrows only the chooser; a drop carries whatever the OS hands over, and
+ * `image/*` admits types (`.heic`, `.bmp`) no listing names. A surface that selects what it just
+ * uploaded must not upload a file it will then fail to show.
+ */
+export type UploadOnly = "media" | "image";
+
+/** The files `only` admits; the rest are named in one warning rather than written unseen. */
+function keepListable(files: File[], only: UploadOnly): File[] {
+  const admits = (file: File): boolean =>
+    only === "image" ? IMAGE_EXTENSIONS.has(extensionOf(file.name)) : isMediaFile(file.name);
+  const kept: File[] = [];
+  const skipped: string[] = [];
+  for (const file of files) {
+    if (admits(file)) {
+      kept.push(file);
+    } else {
+      skipped.push(file.name);
+    }
+  }
+  if (skipped.length > 0) {
+    notify.warn(
+      skipped.length === 1 ? `Skipped ${skipped[0]}` : `Skipped ${skipped.length} files`,
+      {
+        detail:
+          only === "image"
+            ? `Only images can be used here: ${skipped.join(", ")}.`
+            : `Studio lists images, video, audio, PDFs and fonts as media, so ${skipped.join(", ")} would not appear in it.`,
+        source: "Media",
+      },
+    );
+  }
+  return kept;
+}
+
 /**
  * Upload files into the project and report what landed.
  *
@@ -235,9 +303,9 @@ export function setMediaChangedHandler(fn: ((dir: string) => void | Promise<void
  */
 export async function uploadAssets(
   files: Iterable<File>,
-  opts: { dir?: string } = {},
+  opts: { dir?: string; only?: UploadOnly } = {},
 ): Promise<UploadedAsset[]> {
-  const list = [...files];
+  const list = opts.only === undefined ? [...files] : keepListable([...files], opts.only);
   if (list.length === 0) {
     return [];
   }
@@ -297,3 +365,92 @@ export async function uploadAssets(
   }
   return uploaded;
 }
+
+/** Extensions that name one format, so either may stand in for the other. */
+const SAME_FORMAT: readonly ReadonlySet<string>[] = [
+  new Set([".jpg", ".jpeg"]),
+  new Set([".tif", ".tiff"]),
+];
+
+/** Every extension that names the same format as `ext` (itself included). */
+function formatSiblings(ext: string): ReadonlySet<string> {
+  return SAME_FORMAT.find((group) => group.has(ext)) ?? new Set([ext]);
+}
+
+/**
+ * The `accept` for a Replace of the file at `path`: its own format, and only that.
+ *
+ * The path is what every document names, and the server answers it with the type its EXTENSION
+ * implies, so bytes of another format under it are a broken picture on every page that uses it.
+ */
+export function replaceAccept(path: string): string {
+  return [...formatSiblings(extensionOf(path))].join(",");
+}
+
+/** Whether `file` may replace the file at `path`: the same format, by extension. */
+export function canReplaceWith(path: string, file: { name: string }): boolean {
+  return formatSiblings(extensionOf(path)).has(extensionOf(file.name));
+}
+
+/**
+ * Write `file`'s bytes over the existing media file at `path` — the Media workspace's **Replace**.
+ *
+ * The only overwrite in this module, and asked for by name (studio.md §9.3): every reference to
+ * `path` keeps resolving and now shows the new bytes. Nothing about the path tells a cache that the
+ * file changed, so this forgets the path's content version (§3.4) and announces the change, which
+ * drops the media listing, its metadata and the usage answers derived from it.
+ *
+ * A backend that reports a DIFFERENT path did not replace anything: it wrote a second file beside
+ * the first, and the references still name the old bytes. That is said rather than called success.
+ *
+ * @returns Whether the bytes now at `path` are the new ones.
+ */
+export async function replaceAsset(path: string, file: File): Promise<boolean> {
+  const name = path.split("/").pop() ?? path;
+  /* An `accept` narrows only the chooser (and a backend's own picker may ignore it), so the format is
+     checked here too: same path, other format, is every reference broken at once. */
+  if (!canReplaceWith(path, file)) {
+    notify.error(`${file.name} cannot replace ${name}.`, {
+      detail: `${name} is ${extensionOf(path) || "a file with no extension"} and ${file.name} is ${extensionOf(file.name) || "a file with no extension"}. Every page that uses ${name} would get bytes its address does not describe; choose a file of the same type, or upload it as a new file.`,
+      path,
+      source: "Media",
+    });
+    return false;
+  }
+  const maxBytes = hasPlatform() ? getPlatform().assetCapabilities?.maxUploadBytes : undefined;
+  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",
+    });
+    return false;
+  }
+  let written: string;
+  try {
+    ({ path: written } = await getPlatform().uploadFile(path, file));
+  } catch (error) {
+    notify.error(`Could not replace ${name}.`, {
+      detail: errorMessage(error),
+      path,
+      source: "Media",
+    });
+    return false;
+  }
+  forgetVersions([path, written]);
+  // The answers were about the old bytes' place in the project; the place is the same, but a stale
+  // "Used on" is a list the reader acts on, so it is asked again rather than trusted.
+  invalidateUsages();
+  await announceMediaChanged(parentDir(path));
+  if (written !== path) {
+    notify.warn(`${name} was not replaced.`, {
+      detail: `The backend stored the new file as ${written}, so every reference still shows the old one.`,
+      path,
+      source: "Media",
+      // A Problem rather than a toast: two files now exist, and the reader has a decision to make.
+      tier: "problem",
+    });
+    return false;
+  }
+  notify.success(`Replaced ${name}`);
+  return true;
+}

package/src/files/new-file-name.ts

@@ -0,0 +1,156 @@
+/**
+ * The rules a new file's name is held to, with no dialog and no write attached.
+ *
+ * `createFileIn` (`files/files.ts`) used to keep these inside one closure over its prompt, which
+ * was right while the prompt was the only creation flow there was. Add new (`create/add-new.ts`,
+ * `specs/studio.md` §9.1.1) composes a name the same way and must refuse the same things — a blank
+ * name, a name that escapes the destination, a name that is already taken — and a second copy of
+ * those rules would disagree with the first the first time either was fixed. So the composing and
+ * the judging live here, DOM-free, and both flows call them; only the write, and what each flow
+ * does around it, differs.
+ *
+ * Nothing here lists a directory. The caller supplies the `taken` names it listed, because when
+ * that listing happens is the caller's concern: before the prompt opens for New File, and once per
+ * destination directory for Add new, whose destination moves as the reader types.
+ *
+ * @docs studio/interface
+ */
+
+/**
+ * The picker row meaning "I will type the whole name myself".
+ *
+ * It is what keeps the format picker from being a cage. `New File…` is the only generic
+ * file-creation affordance in Studio and both backends create intermediate directories on write, so
+ * without this row `styles/main.css`, `public/robots.txt`, `.gitignore` and a `credits.txt` beside
+ * a collection's images all become uncreatable — and the picker would have taken away more than it
+ * gave. The picker stays the authority on the extension; this is one of its answers.
+ */
+export const OTHER_FORMAT = "__other__";
+
+/** How the extension of a new file is settled. */
+export type FormatChoice =
+  /** Picker over every creatable format, plus Other…. The field is a NAME, taken verbatim. */
+  | { kind: "choose"; defaultExt?: string; docKind?: "page" | "component" | "content" }
+  /**
+   * Picker holding ONE format, plus Other… — the collection's own extension. The field is a NAME.
+   * `because` is the sentence a refusal quotes when Other… would smuggle a foreign document in.
+   */
+  | { kind: "locked"; ext: string; because: string }
+  /** No picker. The field is a DISPLAY NAME, slugified, and `ext` is appended. */
+  | { kind: "fixed"; ext: string };
+
+/** A display name, reduced to a file stem. Lowercase by design: this is a slug. */
+export function slugify(input: string): string {
+  return input
+    .trim()
+    .toLowerCase()
+    .replaceAll(/\s+/g, "-")
+    .replaceAll(/[^a-z\d-]/g, "");
+}
+
+/** The extension of a file name, including the dot, or `""`. */
+export function extensionOfName(name: string): string {
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(dot) : "";
+}
+
+/**
+ * The file name a field value and a pick compose to — three modes, not two.
+ *
+ * The verbatim STEM mode is not a convenience. The slugifier lowercases and strips everything
+ * outside `[a-z0-9-]`, which turns `[slug]` into `slug` — and eight shipped starters carry
+ * `pages/[slug].json`, `[sku].json`, `[...slug].json`. A picker that slugified would make a dynamic
+ * route uncreatable and would say nothing about it.
+ *
+ * @param input What the reader typed.
+ * @param picked The picker's value: an extension, {@link OTHER_FORMAT}, or `""` with no picker.
+ * @param choice How the extension is settled; absent takes the whole name verbatim.
+ */
+export function composeNewFileName(input: string, picked: string, choice?: FormatChoice): string {
+  const trimmed = input.trim();
+  if (choice === undefined || picked === OTHER_FORMAT) {
+    return trimmed;
+  }
+  if (choice.kind === "fixed") {
+    const slug = slugify(trimmed);
+    return slug === "" ? "" : `${slug}${choice.ext}`;
+  }
+  return trimmed.toLowerCase().endsWith(picked.toLowerCase()) ? trimmed : `${trimmed}${picked}`;
+}
+
+/** What a name is judged against: where it is going, and what is already there. */
+export interface NewFileNameCheck {
+  /** Destination directory, project-relative. `"."` is the project root. */
+  dir: string;
+  choice?: FormatChoice | undefined;
+  /** The destination's entries, LOWER-CASED: APFS and NTFS compare without case, and so does this. */
+  taken: ReadonlySet<string>;
+  /** Extensions that are documents, lower-cased (`knownDocumentExtensions()`). */
+  known?: ReadonlySet<string>;
+  /** The picker's rows, for naming a pick in a refusal. */
+  rows?: readonly { label: string; value: string }[] | null;
+}
+
+/**
+ * The refusal a name earns, or `""` when it is usable.
+ *
+ * In order: blank, a display name that slugifies to nothing, a path that starts or ends with a
+ * slash, a `..` segment, a subfolder where the field is a name rather than a whole file name, an
+ * extension that contradicts the pick, a document smuggled through Other… past a collection's lock,
+ * and finally a name already taken in the destination. The first that applies is the sentence.
+ *
+ * @param value What the reader typed.
+ * @param picked The picker's value, as {@link composeNewFileName} takes it.
+ * @param check The destination and what it already holds.
+ */
+export function validateNewFileName(
+  value: string,
+  picked: string,
+  check: NewFileNameCheck,
+): string {
+  const { choice, dir, known = new Set<string>(), rows = null, taken } = check;
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return choice?.kind === "fixed" ? "Enter a name." : "Enter a file name.";
+  }
+  if (choice?.kind === "fixed" && slugify(trimmed) === "") {
+    return "Enter at least one letter or number.";
+  }
+  const normalized = trimmed.replaceAll("\\", "/");
+  if (normalized.startsWith("/") || normalized.endsWith("/")) {
+    return "Enter a name, not a path that starts or ends with a slash.";
+  }
+  if (normalized.split("/").includes("..")) {
+    return "A name cannot step outside the destination folder.";
+  }
+  // A slash is the tree's ONLY way to make a directory — both backends create them on write — so
+  // It is allowed exactly where the field is a whole file name, and refused where it is a name.
+  if (normalized.includes("/") && choice !== undefined && picked !== OTHER_FORMAT) {
+    return `Pick Other… to create a file in a subfolder of ${dir === "." ? "the project root" : dir}.`;
+  }
+  /* A name whose extension MATCHES the pick is fine and is composed once, never doubled;
+     refusing every trailing extension would reject this dialog's own `untitled.json` default.
+     A name ending in an extension no format claims is a stem that happens to have a dot. */
+  const typedExt = extensionOfName(normalized);
+  if (
+    picked !== "" &&
+    picked !== OTHER_FORMAT &&
+    typedExt !== "" &&
+    typedExt.toLowerCase() !== picked.toLowerCase() &&
+    known.has(typedExt.toLowerCase())
+  ) {
+    const label = rows?.find((row) => row.value === picked)?.label ?? picked;
+    return `You picked ${label}; this name ends in ${typedExt}.`;
+  }
+  if (choice?.kind === "locked" && picked === OTHER_FORMAT) {
+    const foreign = typedExt !== "" && typedExt.toLowerCase() !== choice.ext.toLowerCase();
+    if (foreign && known.has(typedExt.toLowerCase())) {
+      return choice.because;
+    }
+  }
+  /* No emptiness check here: every way `composeNewFileName` can answer "" is already refused
+     above — a blank field by the first rule, a display name that slugifies to nothing by the
+     second. */
+  const candidate = composeNewFileName(value, picked, choice);
+  return taken.has(candidate.toLowerCase()) ? `${candidate} already exists in ${dir}/.` : "";
+}

package/src/files/serialize-document.ts

@@ -20,6 +20,7 @@ import {
   loadFormats,
 } from "../format/format-host";
 import { serializeJson } from "@jxsuite/schema/json-layout";
+import { restoreBareRepeaters } from "../tabs/bare-repeaters";
 import type { Tab } from "../tabs/tab";
 
 /**
@@ -43,7 +44,11 @@ export async function serializeDocument(tab: Tab): Promise<string> {
     const fm = tab.doc.content.frontmatter;
     const doc = tab.doc.document;
     const fullDoc = { ...fm, ...doc, children: doc.children ?? [] };
-    return formatSerialize(sourceFormat.name, fullDoc, { mode: "roundtrip" });
+    // The text the file was read as, so what the author did not edit keeps its own spelling.
+    return formatSerialize(sourceFormat.name, fullDoc, {
+      mode: "roundtrip",
+      ...(tab.doc.source !== null && { source: tab.doc.source }),
+    });
   }
   if (tab.doc.mode === "content") {
     const format = defaultContentFormat();
@@ -62,6 +67,11 @@ export async function serializeDocument(tab: Tab): Promise<string> {
      a blank line sits, which characters were escaped — and it is null for a document with no JSON
      source, where every object expands and every array is laid by fit: the formatter's own answer
      for stringified output. Either way the text ends with one newline, as every formatted file
-     does. */
-  return serializeJson(tab.doc.document, tab.doc.layout ?? null);
+     does. A repeater the file wrote as a node's whole `children` is written that way again
+     (`tabs/bare-repeaters.ts`), so the member form the editor works in never reaches the disk —
+     which is also what keeps the layout's pointers, taken from the file's own text, lined up. */
+  return serializeJson(
+    restoreBareRepeaters(tab.doc.document, tab.doc.bareRepeaters ?? null),
+    tab.doc.layout ?? null,
+  );
 }

package/src/format/format-host.ts

@@ -284,6 +284,16 @@ export function documentExtensions(kind?: string): string[] {
   return [...exts];
 }
 
+/**
+ * The extensions the build routes under `pages/`: `.json`, and every extension a page format claims
+ * (`discoverPages` in `@jxsuite/compiler` walks with the same set). Waits for the registry, so a
+ * Markdown page is never judged unroutable because the formats had not landed yet.
+ */
+export async function routedPageExtensions(): Promise<string[]> {
+  await loadFormats();
+  return [".json", ...documentExtensions("page")];
+}
+
 /** The default format for new content documents (first content-kind serializer). */
 export function defaultContentFormat(): StudioFormat | undefined {
   return _formats.find((f) => f.capabilities.serialize && f.documentKinds.includes("content"));
@@ -295,6 +305,11 @@ export interface FormatActionOptions {
   mode?: string;
   /** Whether the serializer writes a frontmatter block. */
   frontmatter?: boolean;
+  /**
+   * The text the document was read from: a roundtrip serializer keeps the spelling of whatever did
+   * not change (`@jxsuite/parser`'s `source` option).
+   */
+  source?: string;
 }
 
 /**

package/src/github/github-auth.ts

@@ -15,8 +15,8 @@
  * **This flow fails, and until now it failed silently.** `https://github.com/login/device/code`
  * sends no `Access-Control-Allow-Origin`, so a browser cannot call it: in Studio-in-a-browser the
  * very first request rejects with a bare `TypeError`. That rejection used to become a thrown
- * `Error` out of {@link authenticateGithub}, into `void createGithubRepository(…)` in
- * `panels/git-panel.ts`, and from there into an unhandled promise rejection — the user clicked
+ * `Error` out of {@link authenticateGithub}, into `void createGithubRepository(…)` in the Source
+ * Control panel of the time, and from there into an unhandled promise rejection — the user clicked
  * "Create GitHub repository" and the app did nothing at all, forever, with no message anywhere.
  *
  * Three failures now reach a surface, each as the kind of record §16 says it is:

package/src/github/github-publish.ts

@@ -175,7 +175,8 @@ export async function createGithubRepository({ projectName }: { projectName: str
     // Surfaced as a push failure describing the push.
     activity.log(errorMessage(error));
     activity.fail("The repository was created, but the remote could not be added.", {
-      action: "panel.focus.git",
+      action: "view.setWorkspace",
+      actionArgs: { workspace: "publish" },
     });
     return false;
   }
@@ -191,8 +192,8 @@ export async function createGithubRepository({ projectName }: { projectName: str
     return false;
   }
 
-  // Lazy import breaks the github-publish ↔ git-panel module cycle
-  const { refreshGitStatus } = await import("../panels/git-panel");
+  // Lazy import breaks the github-publish ↔ source-control module cycle
+  const { refreshGitStatus } = await import("../publish/source-control");
   await refreshGitStatus();
   activity.done(repo.html_url);
   notify.success(`Repository created: ${repo.html_url}`, { key: "github.repo" });

package/src/grid/grid-controller.ts

@@ -144,9 +144,13 @@ export function createGridController(tab: Tab, source: GridSource): GridControll
 
   const reloadRows = async () => {
     const result = await source.rows(state.query);
+    /* Index BEFORE the rows are published. The index is not reactive, and assigning `state.rows`
+       runs the effects that read it at once: a record's entry form (`content/record-entry.ts`)
+       resolves its row key from the new rows and reads that row's cells through the baseline,
+       which with the index still empty drew every field blank until something else re-ran it. */
+    indexRows(result.rows);
     state.rows = result.rows;
     state.total = result.total;
-    indexRows(result.rows);
   };
 
   /** Missing required cells block the save (marked as row/cell errors, like a failed commit). */