@jxsuite/studio 6.1.2 → 8.0.1

package/src/grid/grid-open.ts

@@ -20,7 +20,6 @@ import {
 } from "./sources/content-source";
 import { createConnectorSource } from "./sources/connector-source";
 import { GRID_STUB_DOCUMENT, makeGridTabId, parseGridTabId } from "./grid-source";
-import { libraryTabId } from "../browse/library-source";
 import { argsSchema, optionalStringArg, stringArg, stringProperty } from "../commands/command-args";
 import type { GridSource } from "./grid-source";
 import type { GridOpenSurfaceHandle, GridSourceGroup } from "../surfaces/grid-open";
@@ -99,32 +98,6 @@ export function openCollectionGrid(typeName: string): Tab {
   return openVirtualGridTab(createCollectionSource(typeName));
 }
 
-/**
- * Open (or activate) the Library.
- *
- * A real tab, in the primary pane, with `manage` as its only mode — `commands/context.ts` maps that
- * to the `library` editor kind, so the status bar and the pane context bar can name what is on
- * screen. It is opened here rather than in `browse/` because this is the module that knows how a
- * virtual tab is made; the pane itself resolves its own source and its own view state.
- *
- * Idempotent by construction, which is what lets a shot say "the Library is open" without caring
- * whether an earlier step opened it.
- */
-export function openLibraryTab(): Tab {
-  const id = libraryTabId();
-  const existing = workspace.tabs.get(id);
-  if (existing) {
-    activateTab(id);
-    return existing;
-  }
-  return openTab({
-    capabilities: { modes: ["manage"] },
-    document: structuredClone(GRID_STUB_DOCUMENT),
-    documentPath: null,
-    id,
-  });
-}
-
 /** Open (or activate) the pages metadata grid. */
 export function openPagesGrid(): Tab {
   const id = makeGridTabId({ kind: "pages" });

package/src/grid/grid-panel.ts

@@ -41,6 +41,7 @@ import { createGridController, getGridController } from "./grid-controller";
 import { createCsvFileSource } from "./sources/csv-file-source";
 import { loadedGridEngine, loadGridEngine } from "./grid-lazy";
 import { parseGridTabId } from "./grid-source";
+import { clearGridReveal, pendingGridReveal } from "./grid-reveal";
 import { mountGridPanelSurface } from "../surfaces/grid-panel";
 import { openGridViewsSurface } from "../surfaces/grid-views";
 import { openGridReplaceSurface } from "../surfaces/grid-replace";
@@ -615,15 +616,66 @@ export function renderGridMode(surface: CanvasSurface, tab: Tab) {
           }
           restored = true;
           const layout = loadGridLayout(engine.source.id);
-          void engine.setSort(layout?.sort ?? null);
-          engine.setGrouping(layout?.groupBy ?? null);
+          restoreStoredOrder(engine, layout);
           view.setSearch(layout?.filter ?? "");
         });
       }
+      revealRequested(engine, panel, tab.documentPath);
     });
   });
 }
 
+/**
+ * Put the stored sort and grouping back on a freshly built engine, asking the controller only for
+ * what differs from the order it already holds.
+ *
+ * The controller outlives the panel: leaving the grid's workspace and coming back rebuilds the
+ * table but keeps the controller, so on every return after the first the stored order IS the
+ * controller's order. Asking for it anyway was not free. Each of `setSort` and `setGrouping`
+ * re-projects the rows into the view, and a view still building parks that as a refresh it runs the
+ * moment it is built, so every open rendered its rows twice (the second time measuring every row's
+ * height again); a remote-sorting source re-queried its backend for the same rows on top. An
+ * explicit change (a saved view applied, a header in the Views popover) still goes straight to the
+ * controller, so re-asking for the order you are looking at keeps its meaning there.
+ */
+export function restoreStoredOrder(engine: GridController, layout: GridLayout | null): void {
+  const sort = layout?.sort ?? null;
+  const { query, grouping } = engine.state;
+  const sortHeld =
+    sort === null
+      ? query.orderBy === undefined
+      : query.orderBy === sort.field && query.dir === sort.dir;
+  if (!sortHeld) {
+    void engine.setSort(sort);
+  }
+  const groupBy = layout?.groupBy ?? null;
+  if (grouping !== groupBy) {
+    engine.setGrouping(groupBy);
+  }
+}
+
+/**
+ * Land on the row a record's opener asked for (`grid-reveal.ts`), once the engine and the rows
+ * exist. The position counts the file's data rows as loaded, so it names a row whatever order a
+ * saved view sorts them into. The request is taken either way: a row that is gone is not revealed
+ * later by surprise.
+ */
+function revealRequested(
+  engine: GridController,
+  panel: ActiveGridPanel,
+  path: string | null | undefined,
+): void {
+  const position = pendingGridReveal(path);
+  if (position === undefined || !path || !panel.view || engine.state.loading) {
+    return;
+  }
+  clearGridReveal(path);
+  const row = engine.state.rows[position];
+  if (row) {
+    void panel.view.revealRow(row.key);
+  }
+}
+
 /** The frame a tab with no grid source draws: one sentence, and no controls to press. */
 function missingView(): GridPanelView {
   return {

package/src/grid/grid-reveal.ts

@@ -0,0 +1,34 @@
+/**
+ * The row a file's grid should land on when it opens: a file-backed collection's record.
+ *
+ * A collection whose `source` names one file (`./content/projects.csv`) is written in that file's
+ * grid, so opening one of its records in the Content home opens the file (`specs/studio.md` §22.5).
+ * Opening the whole table and leaving the reader to find the row they clicked is not opening the
+ * record, so the opener names the record's position here and the grid selects that row and scrolls
+ * it into view once its rows have loaded.
+ *
+ * Reactive and keyed by the file's path, so a request reaches a grid that is already on screen as
+ * well as one still loading: the grid panel's one effect reads it, applies it and takes it.
+ *
+ * @docs studio/projects/browse
+ */
+
+import { reactive } from "../reactivity";
+
+/** File path → the position of the row to reveal, among the file's data rows from 0. */
+const pending = reactive(new Map<string, number>());
+
+/** Ask the grid of `path` to reveal the row at `position` (its place among the data rows, from 0). */
+export function requestGridReveal(path: string, position: number): void {
+  pending.set(path, position);
+}
+
+/** The row the grid of `path` is asked to reveal, or `undefined`. Reading it tracks it. */
+export function pendingGridReveal(path: string | null | undefined): number | undefined {
+  return path ? pending.get(path) : undefined;
+}
+
+/** Drop the request for `path` once the grid has acted on it. */
+export function clearGridReveal(path: string): void {
+  pending.delete(path);
+}

package/src/grid/grid-source.ts

@@ -143,19 +143,9 @@ const GRID_SCHEME = "grid://";
  */
 export const GRID_STUB_DOCUMENT = { children: [], tagName: "div" };
 
-/**
- * The virtual sources a tab id can name.
- *
- * `library` is the odd one and deliberately so: the Library is a source over this same contract
- * (`browse/library-source.ts`) but its tab's editor kind is `library`, not `grid` — Table is one of
- * its five layouts rather than its identity. It lives in this id space because "which virtual tab
- * is this?" has exactly one answer per window and there is no second scheme worth inventing.
- * Category and layout are VIEW state and are deliberately absent from the id: a Library that
- * changed identity when you clicked "Pages" would open a second tab per filter.
- */
+/** The virtual sources a grid tab id can name. */
 export type GridTabRef =
   | { kind: "pages" }
-  | { kind: "library" }
   | { kind: "collection"; name: string }
   | { kind: "data"; connection: string; table: string };
 
@@ -165,9 +155,6 @@ export function makeGridTabId(ref: GridTabRef): string {
     case "pages": {
       return `${GRID_SCHEME}pages`;
     }
-    case "library": {
-      return `${GRID_SCHEME}library`;
-    }
     case "collection": {
       return `${GRID_SCHEME}collection/${encodeURIComponent(ref.name)}`;
     }
@@ -191,9 +178,6 @@ export function parseGridTabId(id: string): GridTabRef | null {
   if (parts[0] === "pages" && parts.length === 1) {
     return { kind: "pages" };
   }
-  if (parts[0] === "library" && parts.length === 1) {
-    return { kind: "library" };
-  }
   if (parts[0] === "collection" && parts.length === 2 && parts[1]) {
     return { kind: "collection", name: decodeURIComponent(parts[1]) };
   }
@@ -208,11 +192,8 @@ export function parseGridTabId(id: string): GridTabRef | null {
 }
 
 /**
- * Short human label for a virtual tab ("posts · grid", "users @ main · grid", "Pages · grid").
- *
- * The Library is just "Library": the `· grid` suffix distinguishes a grid over a source from the
- * document tab of the same name, and the Library has no document tab to be confused with — nor is a
- * grid what it is, only what one of its layouts draws.
+ * Short human label for a virtual tab ("posts · grid", "users @ main · grid", "Pages · grid"). The
+ * `· grid` suffix distinguishes a grid over a source from the document tab of the same name.
  */
 export function gridTabLabel(id: string): string | null {
   const ref = parseGridTabId(id);
@@ -223,9 +204,6 @@ export function gridTabLabel(id: string): string | null {
     case "pages": {
       return "Pages · grid";
     }
-    case "library": {
-      return "Library";
-    }
     case "collection": {
       return `${ref.name} · grid`;
     }

package/src/grid/grid-view.ts

@@ -52,6 +52,12 @@ export interface GridView {
   getSelectedRowKeys: () => string[];
   /** Local text filter across all columns (empty clears). */
   setSearch: (term: string) => void;
+  /**
+   * Select one row's cells and scroll it into view, once the table is built.
+   *
+   * @returns False when no row the table shows carries the key (filtered out, or gone).
+   */
+  revealRow: (rowKey: string) => Promise<boolean>;
   destroy: () => void;
 }
 
@@ -216,12 +222,17 @@ export function createGridView(host: HTMLElement, controller: GridController): G
 
   controller.bindView({ refreshData });
 
-  table.on("tableBuilt", () => {
-    built = true;
-    if (pendingRefresh) {
-      pendingRefresh = false;
-      refreshData();
-    }
+  /* Settles once the table is built: a reveal asked for before then waits for it, because the
+     engine has no rows to find, and its default range would replace the one the reveal drew. */
+  const whenBuilt = new Promise<void>((resolve) => {
+    table.on("tableBuilt", () => {
+      built = true;
+      if (pendingRefresh) {
+        pendingRefresh = false;
+        refreshData();
+      }
+      resolve();
+    });
   });
 
   /*
@@ -384,6 +395,20 @@ export function createGridView(host: HTMLElement, controller: GridController): G
 
     refreshData,
 
+    async revealRow(rowKey: string) {
+      await whenBuilt;
+      const row = table.getRow(rowKey);
+      const cells = row ? row.getCells() : [];
+      const [first] = cells;
+      const last = cells.at(-1);
+      if (!first || !last) {
+        return false;
+      }
+      table.addRange(first, last);
+      await table.scrollToRow(rowKey, "center", false).catch(() => {});
+      return true;
+    },
+
     setSearch(term: string) {
       const query = term.trim().toLowerCase();
       if (query === "") {

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

@@ -39,6 +39,10 @@ import {
   loadFormats,
 } from "../../format/format-host";
 import { parseSourceForPath } from "../../files/file-ops";
+import { collectionForDirectory } from "../../content/collection-match";
+import { collectionSourceFile } from "../../content/content-collections";
+import { fileRecordIds as recordIdsOf } from "../../content/file-record-ids";
+import { LOCALE_PLACEHOLDER } from "../../canvas/asset-resolve";
 import { columnsFromSchema, inferColumnsFromRows } from "../schema-columns";
 import { makeGridTabId } from "../grid-source";
 import type {
@@ -129,14 +133,77 @@ async function listEntryFiles(dir: string, exts: string[]): Promise<string[]> {
   return results.toSorted();
 }
 
-/** Entry ids (file stems) of a collection — used by relationship cell editors. */
+/**
+ * The real directories a collection's entries live in.
+ *
+ * A plain source is its one directory. A localized source (`content/exhibitions/{locale}`) is one
+ * directory per language, and the literal path with the placeholder is a directory nobody has:
+ * listing it is a 500 from the dev server and an empty collection on screen. So the placeholder's
+ * parent is listed, and each subdirectory is kept when the one collection matcher
+ * (`content/collection-match.ts`) says that directory IS this collection's, which is what keeps an
+ * undeclared language or a co-located `images/` folder out.
+ */
+export async function collectionSourceDirs(info: { dir: string; name: string }): Promise<string[]> {
+  const cut = info.dir.indexOf(LOCALE_PLACEHOLDER);
+  if (cut === -1) {
+    return [info.dir];
+  }
+  const head = info.dir.slice(0, cut).replace(/\/$/, "");
+  const tail = info.dir.slice(cut + LOCALE_PLACEHOLDER.length);
+  let children;
+  try {
+    children = await getPlatform().listDirectory(head);
+  } catch {
+    return []; // No parent directory yet: a localized collection with no entries in any language.
+  }
+  return children
+    .filter((entry) => entry.type === "directory")
+    .map((entry) => `${entry.path}${tail}`.replace(/\/$/, ""))
+    .filter((dir) => collectionForDirectory(dir)?.name === info.name)
+    .toSorted();
+}
+
+/** Every entry file of a collection, across all of its directories. */
+async function listCollectionFiles(info: CollectionInfo): Promise<string[]> {
+  const dirs = await collectionSourceDirs(info);
+  const lists = await Promise.all(dirs.map((dir) => listEntryFiles(dir, [info.ext])));
+  return lists.flat().toSorted();
+}
+
+/**
+ * The ids of a file-backed collection's records (`content/file-records.ts`), or `null` when the
+ * source is a directory. A source that names a file is read, never listed: listing a CSV as a
+ * directory is a 500 from the dev server and a collection of no entries on screen.
+ */
+async function fileRecordIds(info: CollectionInfo): Promise<string[] | null> {
+  const file = collectionSourceFile(info.name);
+  if (file === null) {
+    return null;
+  }
+  let text: string;
+  try {
+    text = await getPlatform().readFile(file);
+  } catch {
+    return []; // A source file not written yet: an empty collection.
+  }
+  return recordIdsOf(file, text, info.def.idField);
+}
+
+/**
+ * Entry ids of a collection (file stems, or a file-backed collection's record ids), used by
+ * relationship cell editors and the Site panel's counts.
+ */
 export async function listCollectionEntryIds(typeName: string): Promise<string[]> {
   await loadFormats().catch(() => {}); // Extension resolution needs the format registry.
   const info = collectionInfo(typeName);
   if (!info) {
     return [];
   }
-  const files = await listEntryFiles(info.dir, [info.ext]);
+  const recordIds = await fileRecordIds(info);
+  if (recordIds !== null) {
+    return recordIds;
+  }
+  const files = await listCollectionFiles(info);
   return files.map((path) => {
     const base = path.split("/").pop() ?? path;
     return base.slice(0, base.length - info.ext.length);
@@ -421,7 +488,11 @@ function buildEntryFileSource(opts: EntryFileSourceOptions): GridSource {
     }
     const doc = entry.document;
     const fullDoc = { ...frontmatter, ...doc, children: doc.children ?? [] };
-    const text = await formatSerialize(entry.formatName, fullDoc, { mode: "roundtrip" });
+    // The entry's own text, so only the patched keys are re-spelled.
+    const text = await formatSerialize(entry.formatName, fullDoc, {
+      mode: "roundtrip",
+      source: entry.rawText,
+    });
     markLocalMutation(path);
     await platform.writeFile(path, text);
     entries.set(path, { ...entry, frontmatter, rawText: text });
@@ -628,10 +699,7 @@ export function createCollectionSource(typeName: string): GridSource {
       );
     },
     label: typeName,
-    list: () => {
-      const info = requireInfo();
-      return listEntryFiles(info.dir, [info.ext]);
-    },
+    list: () => listCollectionFiles(requireInfo()),
     resolveInsertPath: (raw) => {
       const info = requireInfo();
       let path = raw.trim().replace(/^\.\//, "").replace(/^\//, "");

package/src/grid/tabulator-tables.d.ts

@@ -114,6 +114,12 @@ declare module "tabulator-tables" {
     replaceData(data: RowData<Value>[]): Promise<void>;
     getRows(activeOnly?: string): RowComponent<Value>[];
     getRanges(): RangeComponent<Value>[];
+    /** The row whose `index` field holds `index`, or `false` for none. */
+    getRow(index: string): RowComponent<Value> | false;
+    /** Scroll a row into view; rejects when no row holds `index`. */
+    scrollToRow(index: string, position?: string, ifVisible?: boolean): Promise<void>;
+    /** Select the range between two cells, replacing the oldest range past `selectableRange`. */
+    addRange(start: CellComponent<Value>, end: CellComponent<Value>): RangeComponent<Value>;
     setFilter(filter: (data: RowData<Value>) => boolean): void;
     clearFilter(includeHeaderFilters?: boolean): void;
     redraw(force?: boolean): void;

package/src/hosting/document.ts

@@ -109,8 +109,8 @@ export function studioShellHtml(options: DocumentOptions = {}): string {
   const boot = (options.boot ?? []).map((mod) => `    ${scriptTag(mod)}`).join("\n");
   /* Only when there IS a boot module: `packages/studio/index.html` is generated with none and CI
      diffs it byte for byte, and the dev server it is served by is the one host that should fall
-     back. The `<head>` below stays a literal, attribute-free tag — Electrobun's macOS CEF path
-     injects its preload by splicing after that exact string. */
+     back. The `<head>` below stays a literal, attribute-free tag — a host that
+     injects a preload splices it in after that exact string. */
   const bootMeta = boot
     ? `    <meta name="${BOOT_META.name}" content="${BOOT_META.content}" />\n`
     : "";

package/src/i18n/i18n-commands.ts

@@ -127,6 +127,7 @@ function siblingPath(documentPath: string, locale: string): string | null {
   if (i18n === null || !i18n.locales.includes(locale)) {
     notify.error(`This project does not declare ${localeLabel(locale)}.`, {
       action: "settings.open",
+      actionArgs: { section: "locales" },
       detail: "Add it in Settings › Locales, or with the Add Language command.",
       source: "Languages",
     });
@@ -321,7 +322,7 @@ export function i18nCommands(): AnyCommand[] {
       when: (ctx) => ctx.project.isMultilingual,
       /* No `aiTool`, by studio-ui-guidelines.md §12.4's first deletion rule: the panel is a surface
          for a person. */
-      /* The panel is off the rail — it spends no rail slot and shifts no ⌘1-8 chord — so this
+      /* The panel is off the rail — it spends no rail slot — so this
          command and the generated `panel.focus.i18n` are its only two doors, and both open the
          same one. The TITLES must differ even though the behaviour does not: the palette is a flat
          searchable list where "View: Show Languages" twice is two rows a reader cannot choose

package/src/media/media-commands.ts

@@ -0,0 +1,181 @@
+/**
+ * The Media workspace's verbs, as command records (studio.md §22.6, §9.3).
+ *
+ * - `media.browse { filter?, query?, select? }` shows the Media home, set to a filter, a search or
+ *   one file selected. It is what Add new › Media runs after an upload, so the reader lands on what
+ *   arrived, and what a script or the palette runs to ask "what is unused".
+ * - `media.upload` shows the Media home and opens its Upload picker.
+ * - `media.replace { path }` selects a file and opens its Replace picker: the one overwrite.
+ * - `media.delete { path }` deletes a file, through the confirmation that states its usage.
+ *
+ * Every one runs the flow, never a copy of it: the surface's Upload label and Replace input are the
+ * same controls these open (`HTMLInputElement.showPicker()`), and Delete is the detail pane's own.
+ *
+ * DOM-free at import: the flow and the home opener are loaded on the first run, so
+ * `commands/app-commands.ts` can list these records in a bare Bun process.
+ *
+ * @docs studio/projects/media
+ */
+
+import {
+  argsSchema,
+  enumArg,
+  enumProperty,
+  optionalStringArg,
+  stringArg,
+  stringProperty,
+} from "../commands/command-args";
+import { isMediaFile } from "../files/media-upload";
+import { MEDIA_FILTER_KEYS } from "./media-library-model";
+import type { MediaBrowseRequest } from "./media-library";
+import type { CommandArgValues } from "../commands/command-args";
+import type { AnyCommand, CommandRegistry } from "../commands/registry";
+import type * as MediaLibraryModule from "./media-library";
+import type * as WorkspaceHomeModule from "../workspace/workspace-home";
+
+/** The ids, which Add new and the Site panel run. */
+export const MEDIA_BROWSE = "media.browse";
+export const MEDIA_UPLOAD = "media.upload";
+export const MEDIA_REPLACE = "media.replace";
+export const MEDIA_DELETE = "media.delete";
+
+/**
+ * The flow and the home opener, each imported once. One cached promise per module: two dynamic
+ * imports of one module in flight at once is the shape that loses its coverage record.
+ */
+let _library: Promise<typeof MediaLibraryModule> | null = null;
+let _home: Promise<typeof WorkspaceHomeModule> | null = null;
+
+function library(): Promise<typeof MediaLibraryModule> {
+  _library ??= import("./media-library");
+  return _library;
+}
+
+function home(): Promise<typeof WorkspaceHomeModule> {
+  _home ??= import("../workspace/workspace-home");
+  return _home;
+}
+
+/** A path argument that must name a media file. Refused with the sentence a person can act on. */
+function mediaPathArg(commandId: string, args: CommandArgValues, key: string): string {
+  const path = stringArg(commandId, args, key).replace(/^\.\//, "");
+  if (!isMediaFile(path)) {
+    throw new RangeError(
+      `command "${commandId}": "${path}" is not a media file (an image, video, audio, PDF or font).`,
+    );
+  }
+  return path;
+}
+
+/** The `media.browse` arguments as a request, each read with the reader its schema names. */
+function browseRequestOf(args: CommandArgValues): MediaBrowseRequest {
+  const request: MediaBrowseRequest = {};
+  if (args.filter !== undefined) {
+    request.filter = enumArg(MEDIA_BROWSE, args, "filter", MEDIA_FILTER_KEYS);
+  }
+  const query = optionalStringArg(MEDIA_BROWSE, args, "query");
+  if (query !== undefined) {
+    request.query = query;
+  }
+  if (args.select !== undefined) {
+    request.select = mediaPathArg(MEDIA_BROWSE, args, "select");
+  }
+  return request;
+}
+
+/** Open the Media home tab, which enters the Media workspace by being activated (§22.1). */
+async function showHome(): Promise<void> {
+  const { openWorkspaceHome } = await home();
+  openWorkspaceHome("media");
+}
+
+const PATH_DESCRIPTION = "The media file's project path, such as public/media/hero.jpg.";
+
+/** The four records. */
+export function mediaCommands(): AnyCommand[] {
+  const base = {
+    category: "Project",
+    group: "1_media",
+    level: "project",
+    menus: ["palette"],
+    requires: "an open project",
+    when: (ctx) => ctx.project.open,
+  } satisfies Partial<AnyCommand>;
+  return [
+    {
+      ...base,
+      args: argsSchema(
+        {
+          filter: enumProperty(
+            MEDIA_FILTER_KEYS,
+            "Which media to show: all, image, video, audio, document, font, or unused (files no document references).",
+          ),
+          query: stringProperty("Search the media by name or path."),
+          select: stringProperty(`A file to select and describe. ${PATH_DESCRIPTION}`),
+        },
+        [],
+      ),
+      icon: "image",
+      id: MEDIA_BROWSE,
+      run: async (_ctx, args) => {
+        const request = browseRequestOf(args);
+        const flow = await library();
+        flow.applyMediaBrowse(request);
+        await showHome();
+      },
+      title: "Browse Media",
+      undo: "none",
+    },
+    {
+      ...base,
+      icon: "upload-simple",
+      id: MEDIA_UPLOAD,
+      run: async () => {
+        const flow = await library();
+        await showHome();
+        flow.requestMediaUpload();
+      },
+      title: "Upload Media…",
+      undo: "none",
+    },
+    {
+      ...base,
+      args: argsSchema({ path: stringProperty(`The file to replace. ${PATH_DESCRIPTION}`) }, [
+        "path",
+      ]),
+      icon: "arrows-clockwise",
+      id: MEDIA_REPLACE,
+      run: async (_ctx, args) => {
+        const path = mediaPathArg(MEDIA_REPLACE, args, "path");
+        const flow = await library();
+        await showHome();
+        flow.requestMediaReplace(path);
+      },
+      title: "Replace Media File…",
+      undo: "none",
+    },
+    {
+      ...base,
+      args: argsSchema({ path: stringProperty(`The file to delete. ${PATH_DESCRIPTION}`) }, [
+        "path",
+      ]),
+      // A delete is a danger row wherever it is listed, and sorts last (studio-ui-guidelines.md §12.3).
+      destructive: true,
+      group: "9_danger",
+      icon: "trash",
+      id: MEDIA_DELETE,
+      run: async (_ctx, args) => {
+        const path = mediaPathArg(MEDIA_DELETE, args, "path");
+        const flow = await library();
+        await flow.deleteMediaFile(path);
+      },
+      title: "Delete Media File…",
+      undo: "none",
+    },
+  ];
+}
+
+/** Register the Media records. */
+export function registerMediaCommands(registry: CommandRegistry): void {
+  registry.registerAll(mediaCommands());
+}