@jxsuite/studio 10.1.0 → 10.3.0

package/src/commands/live-context.ts

@@ -30,7 +30,7 @@ import { resolveI18n } from "@jxsuite/schema/locale";
 import { componentRegistry } from "../files/components";
 import { getNodeAtPath, projectState } from "../store";
 import { shell } from "../shell";
-import { activeTab, workspace } from "../workspace/workspace";
+import { activeTab, tabHoldsEditBesideDocument, workspace } from "../workspace/workspace";
 import { primarySelection } from "../tabs/selection";
 import { canRedo, canUndo } from "../tabs/transact";
 import { hasTyping } from "../tabs/typing";
@@ -140,7 +140,10 @@ export function createLiveContext(sources: LiveContextSources): () => CommandCon
 
     ctx.document.open = tab !== null;
     // Typing still in a source buffer is unsaved work too, though the document has not seen it.
-    ctx.document.dirty = tab ? tab.doc.dirty === true || hasTyping(tab.id) : false;
+    // So is an image edit, which is held beside the document rather than in it (§9.5).
+    ctx.document.dirty = tab
+      ? tab.doc.dirty === true || hasTyping(tab.id) || tabHoldsEditBesideDocument(tab)
+      : false;
     ctx.document.mode = tab?.doc.mode ?? "";
     ctx.document.canUndo = tab ? canUndo(tab) : false;
     ctx.document.canRedo = tab ? canRedo(tab) : false;

package/src/editor/shortcuts.ts

@@ -1006,10 +1006,16 @@ const SELF_SCROLLING_MODES: ReadonlySet<string> = new Set([
   /* `media` — the Media viewer's own scrolling column (`media/media-pane.ts`). There is no artboard
      here either: a wheel over an image is a scroll down the page it sits on, not a zoom. */
   "media",
+  /* `image` — the Image editor (`media/image-editor.ts`). Its picture fits the stage and its
+     controls scroll in their own column, so a wheel has no artboard to pan or zoom. */
+  "image",
   /* A workspace's home — `workspace/workspace-home.ts`. A centred column with nothing to zoom. */
   "media-home",
   "preview",
   "publish-home",
+  /* Project Settings' home — `settings/settings-workspace.ts`. Two columns, each scrolling its own
+     list, with nothing to zoom. */
+  "settings-home",
   /* The Styles workspace's Variables view — `style/variables-view.ts`. An `overflow-y: auto`
      column over the stage; without it here the wheel panned an artboard that does not exist. */
   "tokens",

package/src/files/asset-versions.ts

@@ -98,6 +98,22 @@ let floor = 0;
 const dirtiedPaths = new Map<string, number>();
 /** The sequence number at which each directory prefix (`dir/`) was last forgotten. */
 const dirtiedPrefixes = new Map<string, number>();
+/**
+ * Studio's own repaint keys, by normalized project path: a token minted when Studio has just
+ * written a path's bytes itself, which every asset URL builder appends as `"r"` (see
+ * {@link noteLocalWrite}). A map of its own, so nothing that reads a backend version changes
+ * meaning.
+ */
+const revisions = new Map<string, string>();
+/** Counts the repaint keys minted this session. */
+let revisionCount = 0;
+/**
+ * The session the keys are minted in, so a key cannot repeat across a reload: a revalidating cache
+ * still holds `?r=1` from the last session, for bytes that may be older than this session's.
+ */
+const REVISION_SESSION = Date.now().toString(36);
+/** The memoized repaint-key snapshot, or null once a key changed under it. */
+let revisionsSnapshot: Readonly<Record<string, string>> | null = null;
 /** The memoized canvas snapshot, or null once a media version changed under it. */
 let snapshot: Readonly<Record<string, string>> | null = null;
 /**
@@ -119,6 +135,28 @@ function mediaChanged(): void {
   assetVersionsEpoch.value += 1;
 }
 
+/**
+ * Mint a path's repaint key again, if it holds one, reporting whether a media path's did. The key
+ * has a URL's cached pixels behind it, so when the bytes change by any other door (a source-control
+ * discard, say) the old key would go on showing the picture they replaced.
+ */
+function remintRevision(path: string): boolean {
+  if (!revisions.has(path)) {
+    return false;
+  }
+  revisionCount += 1;
+  revisions.set(path, `${REVISION_SESSION}.${revisionCount.toString(36)}`);
+  revisionsSnapshot = null;
+  return isVersionedMediaPath(path);
+}
+
+/** Drop a path's repaint key, if Studio holds one. */
+function dropRevision(path: string): void {
+  if (revisions.delete(path)) {
+    revisionsSnapshot = null;
+  }
+}
+
 /**
  * Begin a listing, returning the sequence number to pass to {@link noteListing} with its answer.
  * Call it BEFORE the request goes out.
@@ -173,6 +211,9 @@ export function noteListing(entries: readonly DirEntry[], since: number): void {
       continue;
     } else {
       versions.set(path, version);
+      /* A version the host vouches for supersedes Studio's own repaint key: it names the same new
+         bytes, and it is the one a host may cache. */
+      dropRevision(path);
     }
     if (isVersionedMediaPath(path)) {
       changed = true;
@@ -212,6 +253,9 @@ export function forgetVersions(paths: readonly string[], prefixDirs: readonly st
     if (versions.delete(path) && isVersionedMediaPath(path)) {
       changed = true;
     }
+    if (remintRevision(path)) {
+      changed = true;
+    }
   }
   for (const raw of prefixDirs) {
     const dir = normalizeProjectPath(raw);
@@ -220,6 +264,11 @@ export function forgetVersions(paths: readonly string[], prefixDirs: readonly st
     }
     const prefix = `${dir}/`;
     dirtiedPrefixes.set(prefix, seq);
+    for (const path of revisions.keys()) {
+      if (path.startsWith(prefix) && remintRevision(path)) {
+        changed = true;
+      }
+    }
     for (const path of versions.keys()) {
       if (path.startsWith(prefix)) {
         versions.delete(path);
@@ -286,9 +335,66 @@ export function forgetAllVersions(): void {
 }
 
 /**
- * Drop every version and dirt record — a project switch, and between tests. A listing begun before
- * the reset is ignored when it lands: it lists the project that was closed.
+ * Record that Studio itself has just written new bytes to `path`, and return the repaint key minted
+ * for it (studio.md §3.4).
+ *
+ * The version above only exists where a host vouches for one, which is the cloud's repo space
+ * alone. Everywhere else an asset URL carries no key at all, so after an in-place overwrite (the
+ * Media workspace's Replace, the Image editor's save) the URL is byte-identical before and after,
+ * and every `<img>` already decoded in the document keeps the old pixels. This key is the second,
+ * clearly separate channel: a monotonic token both asset-URL builders append as `"r"` in BOTH of
+ * their branches. It is deliberately not `v`, because §3.4 binds that name to a version the host
+ * issued and may answer immutably, and a token Studio minted is neither. It is dropped when a
+ * listing vouches for a version, which then names the same bytes.
+ */
+export function noteLocalWrite(path: string): string | undefined {
+  const key = normalizeProjectPath(path);
+  if (key === "") {
+    return undefined;
+  }
+  revisionCount += 1;
+  const token = `${REVISION_SESSION}.${revisionCount.toString(36)}`;
+  revisions.set(key, token);
+  revisionsSnapshot = null;
+  if (isVersionedMediaPath(key)) {
+    // The canvas host watches the same epoch, so a frame is reposted the new keys.
+    mediaChanged();
+  }
+  return token;
+}
+
+/** The repaint key Studio minted for `path`, or undefined when Studio has not written it. */
+export function localRevisionOf(path: string): string | undefined {
+  return revisions.get(normalizeProjectPath(path));
+}
+
+/** Whether Studio holds a repaint key for any path. */
+export function hasLocalRevisions(): boolean {
+  return revisions.size > 0;
+}
+
+/**
+ * Every repaint key as a plain record, for the canvas iframe. Memoized like
+ * {@link assetVersionsSnapshot}, so identity is a cheap "did anything move" test.
+ */
+export function localRevisionsSnapshot(): Readonly<Record<string, string>> {
+  if (revisionsSnapshot) {
+    return revisionsSnapshot;
+  }
+  revisionsSnapshot =
+    revisions.size === 0 ? EMPTY_SNAPSHOT : Object.freeze(Object.fromEntries(revisions));
+  return revisionsSnapshot;
+}
+
+/**
+ * Drop every version, dirt record and repaint key — a project switch, and between tests. A listing
+ * begun before the reset is ignored when it lands: it lists the project that was closed.
  */
 export function resetAssetVersions(): void {
   forgetAllVersions();
+  if (revisions.size > 0) {
+    revisions.clear();
+    revisionsSnapshot = null;
+    mediaChanged();
+  }
 }

package/src/files/file-ops.ts

@@ -23,6 +23,8 @@
 
 import { loadUsages, usageWarning } from "../services/references";
 import { isMediaFile } from "./media-upload";
+import { IMAGE_MODE, imageEditorDirty, saveImage } from "../media/image-editor";
+import { canvasModeOfTab } from "../canvas/canvas-surface";
 import { loadMediaUsages } from "./media-usage";
 import { showConfirmDialog } from "../ui/layers";
 import { locateDocument } from "../services/code-services";
@@ -312,7 +314,9 @@ function reportSaved(tab: Tab) {
  * `source` alternate has the same stub behind it — `canvas-render.ts`'s `sourceContent` falls
  * through to the same `JSON.stringify` when no format class claims the path — so a guard reading
  * `canvasMode === "media"` would have left the one media type that offers a text editor still able
- * to overwrite itself with a placeholder it never showed anyone.
+ * to overwrite itself with a placeholder it never showed anyone. It stays keyed on the file now
+ * that an image can be edited (§9.5): the Image editor writes through its own door, `saveImage`,
+ * and the stub document is still not something any mode may serialize.
  */
 function hasSerializableDocument(tab: Tab): boolean {
   return !isMediaFile(tab.documentPath ?? "");
@@ -373,6 +377,12 @@ export async function saveFile(tab: Tab | null = activeTab.value): Promise<boole
      from one that worked. `warn` rather than `error` — nothing is broken and there is nothing to fix;
      the file is simply not the kind of thing Save writes. */
   if (!hasSerializableDocument(tab)) {
+    /* An image with an edit has a write of its own (§9.5), and ⌘S is the same key for the same
+       intent there. Asked by the edit as well as the mode, so the close prompt's Save writes a
+       pending crop even from the read-only viewer it was left behind in. */
+    if (canvasModeOfTab(tab) === IMAGE_MODE || imageEditorDirty(tab)) {
+      return saveImage(tab);
+    }
     notify.warn(
       `${tab.documentPath ?? "This file"} is a media file, so there is no document for Save to write.`,
       atTabPath(tab, {

package/src/files/files.ts

@@ -75,6 +75,7 @@ import {
 } from "../workspace/workspace";
 import { openCsvGridTab, openPagesGrid } from "../grid/grid-open";
 import { isViewableMedia, openMediaTab } from "../media/media-open";
+import { imageFileChanged } from "../media/image-editor";
 import { activeRegistry } from "../commands/active-registry";
 import { runActiveReported, runReported } from "../commands/run-reported";
 import { collectionOfPath } from "../content/entry-model";
@@ -99,6 +100,7 @@ import {
   composeNewFileName,
   extensionOfName,
   OTHER_FORMAT,
+  renameRefusal,
   validateNewFileName,
 } from "./new-file-name";
 import type { FormatChoice, NewFileNameCheck } from "./new-file-name";
@@ -1510,47 +1512,44 @@ function releaseFileTreeDnD(): void {
  * @param {() => void} renderLeftPanel
  */
 async function moveFileEntry(oldPath: string, newPath: string, renderLeftPanel: () => void) {
-  const platform = getPlatform();
-  markLocalMutation(oldPath, newPath);
+  const name = newPath.split("/").pop() ?? newPath;
+  const newParent = parentDir(newPath);
+  const failure = { path: oldPath, source: "Files" };
+  let listed: DirEntry[];
   try {
-    const report = await platform.renameFile(oldPath, newPath);
-    // The refactor pass just rewrote references project-wide, and `markLocalMutation` suppresses
-    // The watcher echo that would otherwise say so — hence the explicit drop, as in `renameFile`.
-    // Without it a drag-move leaves every usage count in the session answering about the old path.
-    invalidateUsages();
-
-    // Update open tabs referencing the moved path
-    for (const [id] of workspace.tabs.entries()) {
-      if (id === oldPath) {
-        renameTab(oldPath, newPath, newPath);
-      } else if (id.startsWith(`${oldPath}/`)) {
-        const newTabPath = newPath + id.slice(oldPath.length);
-        renameTab(id, newTabPath, newTabPath);
-      }
-    }
-
-    // Refresh affected directories
-    const oldParent = parentDir(oldPath);
-    const newParent = parentDir(newPath);
-    await loadDirectory(oldParent);
-    if (newParent !== oldParent) {
-      await loadDirectory(newParent);
-    }
-
+    listed = await getPlatform().listDirectory(newParent);
+  } catch (error) {
+    // A row was dropped on, so the folder exists: a failed listing says nothing about what is in it.
+    notify.error(`Could not move ${oldPath}.`, {
+      ...failure,
+      detail: `The folder could not be read to check for ${name}: ${errorMessage(error)}`,
+    });
+    return;
+  }
+  /* A move is the same filesystem rename a Rename is, so it replaces its destination in silence.
+     Without regard to case, as `renameRefusal` compares: a case-insensitive disk takes one for the
+     other. A dragged dotfile needs no refusal of its own, since only a host that lists dotfiles can
+     show a row to drag. */
+  const lower = name.toLowerCase();
+  const occupant = listed.find((entry) => entry.name.toLowerCase() === lower);
+  if (occupant !== undefined) {
+    const where = newParent === "." ? "The project root" : `${newParent}/`;
+    notify.error(`Could not move ${oldPath}.`, {
+      ...failure,
+      detail: `${where} already has ${occupant.name}, and a move would replace it.`,
+    });
+    return;
+  }
+  try {
+    const report = await commitRename(oldPath, newPath);
     // Auto-expand target directory
     if (newParent !== ".") {
       requireProjectState().expanded.add(newParent);
     }
-
-    reloadRewrittenTabs(report, newPath);
     renderLeftPanel();
     notifyMoveOutcome(`Moved to ${newPath}`, report, newPath);
   } catch (error) {
-    notify.error(`Could not move ${oldPath}.`, {
-      detail: errorMessage(error),
-      path: oldPath,
-      source: "Files",
-    });
+    notify.error(`Could not move ${oldPath}.`, { ...failure, detail: errorMessage(error) });
   }
 }
 
@@ -2052,14 +2051,21 @@ async function createNewFile(dirPath: string, renderLeftPanel: () => void) {
  * is typed rather than after it is confirmed — the refactor pass is about to rewrite every one of
  * those references, and silently doing that much work was the previous behaviour.
  *
- * @param {string} currentName @param {string} path @returns {Promise<string | null>}
+ * @param currentName The entry's name, which the field opens on.
+ * @param path The entry being renamed.
+ * @param taken The names in its folder, which the field refuses.
+ * @returns The new name, or `null` when the dialog was dismissed.
  */
-async function showRenameFileDialog(currentName: string, path: string): Promise<string | null> {
+async function showRenameFileDialog(
+  currentName: string,
+  path: string,
+  taken: ReadonlySet<string>,
+): Promise<string | null> {
   const message = await renamePromptMessage(path);
   const promptOptions: PromptDialogOptions = {
     confirmLabel: "Rename",
     select: "stem",
-    validate: (v) => (v.trim() ? "" : "Enter a file name."),
+    validate: (v) => renameRefusal(path, v, taken),
     value: currentName,
   };
   if (message !== undefined) {
@@ -2069,7 +2075,7 @@ async function showRenameFileDialog(currentName: string, path: string): Promise<
 }
 
 /** Build the status-bar message for a rename, summarising any reference/tag rewrites. */
-function renameStatus(newName: string, report: RenameResult): string {
+export function renameStatus(newName: string, report: RenameResult): string {
   const refs = report.references;
   const tagNote = report.tag ? `; tag → <${report.tag.to}> (${report.tag.refsUpdated})` : "";
   if (refs && refs.refsUpdated > 0) {
@@ -2154,30 +2160,85 @@ export async function settleRename(from: string, to: string, report: RenameResul
   if (toDir !== fromDir) {
     await loadDirectory(toDir);
   }
-  if (requireProjectState().selectedPath === from) {
-    requireProjectState().selectedPath = to;
+  const state = requireProjectState();
+  if (state.selectedPath === from) {
+    state.selectedPath = to;
+  } else if (state.selectedPath?.startsWith(`${from}/`)) {
+    state.selectedPath = to + state.selectedPath.slice(from.length);
   }
   reloadRewrittenTabs(report, to);
 }
 
+/**
+ * Rename a file on the backend and catch the app up: the one door a rename goes through, whichever
+ * surface asked for the name (the Files panel, the Media workspace).
+ *
+ * The tab is re-keyed rather than reopened, so whatever it holds (unsaved edits, a pending image
+ * crop) stays with the file. Throws what the backend threw; what to say about it is the caller's.
+ *
+ * @param from - The path before the rename.
+ * @param to - The path after it.
+ * @returns What the refactor pass rewrote.
+ */
+export async function commitRename(from: string, to: string): Promise<RenameResult> {
+  markLocalMutation(from, to);
+  const report = await getPlatform().renameFile(from, to);
+  // A copy of the keys, since a re-key edits the map being walked. `from` may be a folder.
+  const openIds = [...workspace.tabs.keys()];
+  for (const id of openIds) {
+    if (id === from || id.startsWith(`${from}/`)) {
+      const moved = to + id.slice(from.length);
+      renameTab(id, moved, moved);
+    }
+  }
+  await settleRename(from, to, report);
+  return report;
+}
+
+/**
+ * The names beside the entry at `path`, for {@link renameRefusal} to judge a new name against.
+ *
+ * Not `listTakenNames`, which answers empty for a folder that may not exist yet. This one holds the
+ * entry, so a failed listing says nothing about what a rename would overwrite, and it makes the
+ * rename refuse rather than guess.
+ *
+ * @param path The entry about to be renamed.
+ * @param source Names the flow in the Problem.
+ * @returns The names, or `null` when the folder could not be read; the reason has been reported.
+ */
+export async function listRenameSiblings(
+  path: string,
+  source: string,
+): Promise<Set<string> | null> {
+  try {
+    const listed = await getPlatform().listDirectory(parentDirOf(path));
+    return new Set(listed.map((entry) => entry.name));
+  } catch (error) {
+    notify.error(`Could not rename ${path.split("/").pop() ?? path}.`, {
+      detail: `The folder could not be read to check the new name: ${errorMessage(error)}`,
+      path,
+      source,
+    });
+    return null;
+  }
+}
+
 async function renameFile(
   entry: { name: string; path: string; type: string },
   renderLeftPanel: () => void,
 ) {
-  const newName = await showRenameFileDialog(entry.name, entry.path);
+  const parentDirPath = parentDirOf(entry.path);
+  const taken = await listRenameSiblings(entry.path, "Files");
+  if (taken === null) {
+    return;
+  }
+  const newName = await showRenameFileDialog(entry.name, entry.path, taken);
   if (!newName || newName === entry.name) {
     return;
   }
-  const parentDirPath = parentDirOf(entry.path);
   const newPath = parentDirPath === "." ? newName : `${parentDirPath}/${newName}`;
-  markLocalMutation(entry.path, newPath);
   try {
-    const platform = getPlatform();
-    const report = await platform.renameFile(entry.path, newPath);
-    if (workspace.tabs.has(entry.path)) {
-      renameTab(entry.path, newPath, newPath);
-    }
-    await settleRename(entry.path, newPath, report);
+    const report = await commitRename(entry.path, newPath);
     renderLeftPanel();
     notifyMoveOutcome(renameStatus(newName, report), report, newPath);
   } catch (error) {
@@ -2446,6 +2507,8 @@ export function reloadCleanTab(path: string): void {
   if (isCollabPath(path)) {
     return;
   }
+  // An image's editor holds the file's bytes rather than a document, and reads them again itself.
+  imageFileChanged(path);
   for (const [, tab] of workspace.tabs.entries()) {
     if (tab.documentPath === path && !tab.doc.dirty) {
       void reloadFileInTab(path);

package/src/files/media-paths.ts

@@ -38,8 +38,8 @@
 
 import { encodeProjectPath, normalizeProjectPath, PUBLIC_DIR } from "@jxsuite/schema/asset-paths";
 import { contentMountFor, hostAssetDeclarations, projectLocales } from "../canvas/asset-refs";
-import { withVersion } from "../canvas/asset-resolve";
-import { versionOf } from "./asset-versions";
+import { withRevision, withVersion } from "../canvas/asset-resolve";
+import { localRevisionOf, versionOf } from "./asset-versions";
 import { loopbackAssetSrc } from "../canvas/canvas-origin";
 import { projectState } from "../store";
 import type { AssetMount } from "@jxsuite/schema/asset-paths";
@@ -134,10 +134,18 @@ export function previewFileSrc(path: string): string {
      host serves the FILE, at its own path, under the declared base — versioned when a listing
      vouched for its bytes, so a host that recognizes the version can let the browser cache it. */
   const { space, fileBaseUrl } = hostAssetDeclarations();
+  /* Studio's own repaint key rides in BOTH branches (§3.4). The site branch is the one that needs
+     it most: it carries no version at all, so after an in-place overwrite its URL would be
+     byte-identical and every thumbnail already decoded would keep the old pixels. */
+  const revision = localRevisionOf(normalized);
   if (space === "repo") {
-    return withVersion(`${fileBaseUrl}${encodeProjectPath(normalized)}`, versionOf(normalized));
+    return withRevision(
+      withVersion(`${fileBaseUrl}${encodeProjectPath(normalized)}`, versionOf(normalized)),
+      revision,
+    );
   }
   /* Encoded per segment for the `src` only. `mediaSiteUrl` is also what an author's document is
      given, and stays as typed; a `#` or `?` in a filename would cut this URL short. */
-  return loopbackAssetSrc(`/${encodeProjectPath(mediaSiteUrl(normalized).slice(1))}`);
+  const encoded = encodeProjectPath(mediaSiteUrl(normalized).slice(1));
+  return withRevision(loopbackAssetSrc(`/${encoded}`), revision);
 }