@jxsuite/studio 6.1.2 → 8.0.1

package/src/media/media-pane.ts

@@ -29,9 +29,16 @@
 
 import { effect, effectScope } from "../reactivity";
 import { paneRegion } from "../ui/regions";
+import { localDay } from "../utils/local-day";
 import { mediaSiteUrl, previewFileSrc } from "../files/media-paths";
-import { formatBytes, loadMediaMeta, peekMediaMeta, recordImageSize } from "../files/media-meta";
-import { extensionOf, mediaKind } from "../files/media-upload";
+import {
+  formatBytes,
+  loadMediaMeta,
+  mediaMetaSettled,
+  peekMediaMeta,
+  recordImageSize,
+} from "../files/media-meta";
+import { FONT_EXTENSIONS, extensionOf, mediaKind } from "../files/media-upload";
 import { loadMediaUsages, mediaUsageHeadline, peekMediaUsages } from "../files/media-usage";
 import { mountMediaSurface } from "../surfaces/media-pane";
 import type { MediaStage, MediaSurfaceHandle, MediaView } from "../surfaces/media-pane";
@@ -43,9 +50,6 @@ import type { CanvasSurface } from "../canvas/canvas-surface";
 /** The `canvasMode` the media viewer draws under. */
 export const MEDIA_MODE = "media";
 
-/** Extensions the viewer renders as a font specimen rather than as a file it cannot show. */
-const FONT_EXTENSIONS = new Set([".woff", ".woff2", ".ttf", ".otf"]);
-
 /** The pangram the font specimen is set in — short, and every letter of the alphabet once. */
 const SPECIMEN = "The quick brown fox jumps over the lazy dog";
 
@@ -97,9 +101,11 @@ export function detachMediaPane(paneId: string): void {
  * Which element the stage should draw this file in.
  *
  * A font is decided by extension before anything else: `mediaKind` calls a `.woff2` a plain file,
- * and a file the browser cannot render is the last answer here rather than the first.
+ * and a file the browser cannot render is the last answer here rather than the first. Exported
+ * because the Media workspace's detail pane (`media/media-library.ts`) asks the same question, and
+ * two answers to it would drift.
  */
-function stageFor(path: string): MediaStage {
+export function mediaStageFor(path: string): MediaStage {
   const ext = extensionOf(path);
   if (FONT_EXTENSIONS.has(ext)) {
     return "font";
@@ -112,7 +118,7 @@ function stageFor(path: string): MediaStage {
 }
 
 /** Kind, dimensions, size and modified time — each omitted rather than zeroed when unknown. */
-function factsLine(path: string, meta: MediaMeta | null): string {
+export function factsLine(path: string, meta: MediaMeta | null): string {
   const facts: string[] = [mediaKind({ name: path })];
   if (meta?.width != null && meta.height != null) {
     facts.push(`${meta.width} × ${meta.height}`);
@@ -121,7 +127,8 @@ function factsLine(path: string, meta: MediaMeta | null): string {
     facts.push(formatBytes(meta.bytes));
   }
   if (meta?.modified) {
-    facts.push(`modified ${meta.modified.slice(0, 10)}`);
+    // The local day it was modified on (`utils/local-day.ts`), not the UTC one.
+    facts.push(`modified ${localDay(new Date(meta.modified))}`);
   }
   return facts.join(" · ");
 }
@@ -131,8 +138,30 @@ function specimenFamily(path: string): string {
   return `jx-specimen-${path.replaceAll(/[^a-zA-Z0-9]/g, "-")}`;
 }
 
+/** What a font specimen draws: its scoped face, the custom property naming it, and the pangram. */
+export interface FontSpecimen {
+  /** A `@font-face` rule for the generated family, loading the file from its preview src. */
+  fontFace: string;
+  /** `--jx-specimen-family: "<family>"`, the one inline declaration a specimen element carries. */
+  specimenFamily: string;
+  specimen: string;
+}
+
+/**
+ * The specimen for a font file, shared by the viewer and the Media workspace's detail pane, so a
+ * font is shown by being USED in both and the face is scoped the same way in both.
+ */
+export function specimenOf(path: string): FontSpecimen {
+  const family = specimenFamily(path);
+  return {
+    fontFace: `@font-face { font-family: "${family}"; src: url("${previewFileSrc(path)}"); }`,
+    specimen: SPECIMEN,
+    specimenFamily: `--jx-specimen-family: "${family}"`,
+  };
+}
+
 /** Which documents reference this file, or the honest reason there is no list. */
-function usageOf(
+export function usageOf(
   usage: UsageState | null,
 ): Pick<MediaView, "usageState" | "usageHeadline" | "usageFiles"> {
   const headline = mediaUsageHeadline(usage);
@@ -179,11 +208,10 @@ export function renderMediaMode(surface: CanvasSurface, tab: Tab): void {
   detachMediaPane(paneId);
 
   const path = tab.documentPath ?? "";
-  const family = specimenFamily(path);
   const src = previewFileSrc(path);
   const ref = mediaSiteUrl(path);
   const ext = extensionOf(path);
-  const kind = stageFor(path);
+  const kind = mediaStageFor(path);
 
   let panel: ActiveMediaPane | null = null;
   const redraw = () => {
@@ -197,25 +225,25 @@ export function renderMediaMode(surface: CanvasSurface, tab: Tab): void {
     const usage = peekMediaUsages(path);
     /* Asked on the first paint that finds it missing, never on every paint: both loaders cache and
        de-duplicate in flight, and both repaint through `redraw` when they land. */
-    if (meta === null) {
+    if (!mediaMetaSettled(path)) {
       void loadMediaMeta(path).then(redraw);
     }
     if (usage === null || usage.status === "pending") {
       void loadMediaUsages(path).then(redraw);
     }
+    /* The face is scoped to the generated family name, so two specimens open side by side cannot
+       claim the same one. Written only for a font: every other stage carries an empty sheet. */
+    const specimen = specimenOf(path);
     return {
       extLabel: ext || "this file",
       facts: factsLine(path, meta),
-      /* The face is scoped to the generated family name, so two specimens open side by side cannot
-         claim the same one. Written only for a font: every other stage carries an empty sheet. */
-      fontFace:
-        kind === "font" ? `@font-face { font-family: "${family}"; src: url("${src}"); }` : "",
+      fontFace: kind === "font" ? specimen.fontFace : "",
       kind,
       name: path.split("/").pop() ?? "",
       ref,
       region: paneRegion(paneId, "media"),
-      specimen: SPECIMEN,
-      specimenFamily: `--jx-specimen-family: "${family}"`,
+      specimen: specimen.specimen,
+      specimenFamily: specimen.specimenFamily,
       src,
       ...usageOf(usage),
     };

package/src/packages/pull-package-sync.ts

@@ -346,7 +346,7 @@ export async function autoSyncProjectOnOpen(): Promise<void> {
   const platform = getPlatform();
   try {
     /* The status is host wire data. A host may leave `remotes` out (as `deploy-checklist.ts` and
-       `git-panel.ts` also allow), which reads as "nothing to sync"; a host that sends no status at
+       `publish-changes.ts` also allow), which reads as "nothing to sync"; a host that sends no status at
        all throws on the first read and is caught below the same way, so a malformed status never
        aborts the project open that awaits this. */
     const status = await platform.gitStatus();

package/src/panels/activity-panel.ts

@@ -43,6 +43,7 @@ import { reactive } from "../reactivity";
 import { now } from "../services/clock";
 import { notify } from "../services/notify";
 import type { NotifyOptions } from "../services/notify";
+import type { CommandArgValues } from "../commands/command-args";
 import { registerPanel } from "./panel-registry";
 import type { PanelBody } from "./panel-registry";
 import type {
@@ -180,7 +181,10 @@ export interface ActivityHandle {
    * The log goes into the notification's `detail`, so the persistent, inspectable error view §16.4
    * asks for is the Problems row, not a modal that has to stay open to be read.
    */
-  fail: (message: string, opts?: { action?: string; path?: string }) => void;
+  fail: (
+    message: string,
+    opts?: { action?: string; actionArgs?: CommandArgValues; path?: string },
+  ) => void;
 }
 
 /**
@@ -237,7 +241,10 @@ export function beginActivity(options: ActivityOptions): ActivityHandle {
       finish("done", status);
     },
     entry: live,
-    fail(message: string, opts: { action?: string; path?: string } = {}) {
+    fail(
+      message: string,
+      opts: { action?: string; actionArgs?: CommandArgValues; path?: string } = {},
+    ) {
       // An operation that has already ended does not get to raise a Problem: the first outcome is
       // The one that happened, and a late `fail()` after a successful `done()` would put a failure
       // On a list whose whole promise is that everything on it still needs fixing.
@@ -253,6 +260,9 @@ export function beginActivity(options: ActivityOptions): ActivityHandle {
       if (opts.action !== undefined) {
         notice.action = opts.action;
       }
+      if (opts.actionArgs !== undefined) {
+        notice.actionArgs = opts.actionArgs;
+      }
       if (opts.path !== undefined) {
         notice.path = opts.path;
       }
@@ -381,8 +391,14 @@ function stepView(step: ActivityStep, index: number): ActivityStepView {
   };
 }
 
-/** One operation, as the document reads it. */
-function rowView(entry: ActivityEntry): ActivityRowView {
+/**
+ * One operation, as a document reads it.
+ *
+ * Exported because the Activity feed is not its only reader: Publish › Deploys draws a running
+ * deploy's steps from the same record (studio.md §22.8), and a second projection of one activity
+ * would be a second set of glyphs for the same states.
+ */
+export function activityRowView(entry: ActivityEntry): ActivityRowView {
   const lines = entry.log.length;
   return {
     cancellable: entry.cancellable,
@@ -423,7 +439,7 @@ export function activityView(): ActivityView {
     clearLabel: `Clear ${finished} finished`,
     hasFinished: finished > 0,
     hasRows: activities.length > 0,
-    rows: activities.map((entry) => rowView(entry)),
+    rows: activities.map((entry) => activityRowView(entry)),
   };
 }
 

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

@@ -1,15 +1,15 @@
 /**
  * Chat-markdown.ts — memoized markdown rendering for assistant chat messages.
  *
- * Wraps @jxsuite/markup/md-html (sanitized markdown → HTML) with a per-message cache
- * keyed by message id + content length, so re-renders during streaming only re-parse
- * the message that actually grew.
+ * Wraps @jxsuite/markup/md-html (sanitized markdown → HTML) with a per-message cache keyed by
+ * message id + content length, so re-renders during streaming only re-parse the message that
+ * actually grew.
  *
- * The HTML ends up in `[part="md"]`, the assistant surface's island — this app's ONE injection
- * sink — and it goes through the Trusted Types policy on the way THERE, in
- * `surfaces/ai-chat.ts`. md-html already sanitizes — raw HTML dropped, javascript: URLs
- * stripped — and the policy asserts that it did, rather than taking a comment's word for it. A
- * `createHTML` that passed its input through unchanged would satisfy the API and defend nothing.
+ * The HTML ends up in `[part="md"]`, the assistant surface's island — this app's ONE injection sink
+ * — and it goes through the Trusted Types policy on the way THERE, in `surfaces/ai-chat.ts`.
+ * md-html already sanitizes — raw HTML dropped, javascript: URLs stripped — and the policy asserts
+ * that it did, rather than taking a comment's word for it. A `createHTML` that passed its input
+ * through unchanged would satisfy the API and defend nothing.
  *
  * **It returns markup, not a template.** It used to hand back a `TemplateResult` wrapping
  * `unsafeHTML` (which stringified the trusted value straight back again); the assistant is a Jx

package/src/panels/block-action-bar.ts

@@ -230,11 +230,11 @@ function barPosition(anchor: {
      "the stage showing the active tab", which was the same answer only while a tab could be on
      screen in one place; with a document displayed in two panes it picked whichever came first in
      the grid, and clipped the bar against a stage the author is not typing in.
-     …and against the box that SCROLLS, where the stage has one. Edit docks the Document Header
-     card above its scroller, inside the same stage cell, so a node scrolled up under the band is
-     still inside the stage while nobody can see it — and the bar would float over the card,
-     pointing at a node the card is covering. Everywhere else there is no scroller and the stage is
-     the viewport, as it always was. */
+     …and against the box that SCROLLS, where the stage has one: Edit's page scroller. Over a
+     collection entry the writing banner stands above it in the same stage cell, so a node
+     scrolled up under the banner is still inside the stage while nobody can see it — and the bar
+     would float over the banner, pointing at a node it covers. Everywhere else there is no
+     scroller and the stage is the viewport, as it always was. */
   const surface = activeCanvasSurface();
   const viewport = panelOfSurface(surface)?.scrollContainer ?? stageOf(surface);
   const box = viewport ? rectOf(viewport) : null;
@@ -244,9 +244,9 @@ function barPosition(anchor: {
   /* ABOVE the anchor where the bar fits above it INSIDE that viewport, and BELOW it where it does
      not. The flip used to be decided against a flat 80 in WINDOW coordinates, the app's own top
      chrome, which is the same answer only while the viewport starts near the top of the window.
-     Edit's scroller starts under a band, so an anchor whose top had scrolled under the card while
-     its bottom was still on screen put the bar ON the card — over the fields it covers, taking
-     their clicks. Flipped is better than hidden: the element is visible, so its bar should be, and
+     Edit's scroller can start under the writing banner, so an anchor whose top had scrolled under
+     it while its bottom was still on screen put the bar ON the banner, taking its clicks. Flipped
+     is better than hidden: the element is visible, so its bar should be, and
      past the clip above the anchor's bottom edge is inside the viewport, so the flipped bar is too.
      The fallback is that same 80px of chrome, for a stage no pass has measured yet. */
   const ceiling = box ? box.top : 80 - BAR_CLEARANCE;
@@ -257,7 +257,7 @@ function barPosition(anchor: {
   /* Below it, and kept INSIDE the viewport: an element taller than what is left of the scroller has
      its bottom edge off screen, and the bar would follow it there — over the status bar, or over
      whatever the pane below is showing. Clamped, it stands on that element's last visible strip,
-     still pointing at it and still off the card. */
+     still pointing at it and still inside the scroller. */
   const below = anchor.top + anchor.height + 4;
   return {
     left: anchor.left,
@@ -1273,8 +1273,8 @@ function hideBar(): void {
  * The document + selection the bar is currently suppressed FOR, or null while it is free to draw.
  *
  * **Why a key and not a boolean.** The bar is `position: fixed` and clamped into the window, so it
- * can sit over the Document Header card, the pane context bar and the docks; an author working in
- * the Inspector's Logic tab reported it "blocking a part of the interface that the user needs to
+ * can sit over the pane context bar, the Inspector and the docks; an author working in the
+ * Inspector's Logic tab reported it "blocking a part of the interface that the user needs to
  * utilize". Hiding it on a chrome pointerdown is half an answer — {@link dismissBlockActionBar}
  * alone would flash back on the very next repaint, because the bar is re-rendered from the
  * `toolbarRefresh` seam on every selection snapshot and from `renderOnly("overlays")` on zoom/pan.

package/src/panels/canvas-dnd-bridge.ts

@@ -25,7 +25,7 @@
  */
 
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { displayTagName } from "@jxsuite/schema/guards";
+import { displayTagName, isString } from "@jxsuite/schema/guards";
 import {
   beginDragSession,
   clearDropIndicator,
@@ -101,7 +101,10 @@ function cursorOf(location: MonitorDragArgs["location"]): ViewportPoint {
  */
 function dragSrcOf(data: ElementDragPayload["data"]): DragSrcKind | null {
   if (data.type === "block") {
-    return { type: "block" };
+    /* SAFETY: every minter of a "block" payload sets `fragment` to the JxMutableNode it inserts;
+       only a string tag is read off it, and anything else crosses as no tag (placed as a block). */
+    const tag = (data.fragment as JxMutableNode | undefined)?.tagName;
+    return isString(tag) ? { tag, type: "block" } : { type: "block" };
   }
   if (data.type === "tree-node" && Array.isArray(data.path)) {
     /* SAFETY: both minters of a "tree-node" payload, an Outline row's `getInitialData` and the block

package/src/panels/chat-panel.ts

@@ -19,12 +19,12 @@
  *
  * **The assistant's SURFACE document is what this module defers.** Mounting `surfaces/ai-chat.ts`
  * costs a traced 100–290 ms of connectedCallback at boot (its island projections; see
- * `scripts/perf/REPORT.md`), paid on every window open although the document is invisible until
- * the tab is picked. Binding is the same seam (`bindAiPanelHost`) and it is now deferred to the
- * first time the Assistant tab is actually shown or revealed: `renderAiPanel` no-ops while the
- * surface is null, and the surface's own watcher projects whatever the machinery wrote before that
- * point, so a prompt seeded into a boot the reader never spends in the tab is not lost — it is one
- * more message waiting when the body first appears.
+ * `scripts/perf/REPORT.md`), paid on every window open although the document is invisible until the
+ * tab is picked. Binding is the same seam (`bindAiPanelHost`) and it is now deferred to the first
+ * time the Assistant tab is actually shown or revealed: `renderAiPanel` no-ops while the surface is
+ * null, and the surface's own watcher projects whatever the machinery wrote before that point, so a
+ * prompt seeded into a boot the reader never spends in the tab is not lost — it is one more message
+ * waiting when the body first appears.
  *
  * **This module is the SEAM, and it has no markup of its own.** The assistant is a Jx document
  * (`surfaces/ai-chat.json`), and a document CLEARS the host it is given — so it needs a container

package/src/panels/collections-panel.ts

@@ -0,0 +1,306 @@
+/// <reference lib="dom" />
+/**
+ * The Collections panel — the Content workspace's Navigator panel (`specs/studio.md` §22.5).
+ *
+ * Two lists, chosen by what the focused pane shows:
+ *
+ * - **The collections.** The built-in Pages and every collection `project.json` declares, in
+ *   declaration order, each with its entry count (from the Content home's scan,
+ *   `browse/library-pane.ts`) and its saved grid views beneath it (`grid/grid-layout.ts`), and **+
+ *   New collection** at the foot. Choosing one shows it in the Content home
+ *   (`content.showCollection`); choosing a saved view opens the collection's grid on it.
+ * - **One collection's entries**, while an entry of it is the focused document: thumbnail, title and
+ *   status (`content/entry-summaries.ts`), under **‹ <Collection>** to go back, with **+ New
+ *   <item>** at the foot. Choosing one opens it where it is written (`content/entry-open.ts`).
+ *
+ * The markup is `surfaces/collections-panel.json`; this module is the flow. It is registered with
+ * no rail button: Content has no rail, and the workspace's frame opens the Navigator on it
+ * (`shell.ts`'s `WORKSPACE_PRESETS`).
+ *
+ * @docs studio/projects/browse
+ */
+
+import { nothing } from "lit-html";
+import { projectState, renderOnly } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { runActiveReported } from "../commands/run-reported";
+import {
+  PAGES_COLLECTION,
+  collectionKeyOfPath,
+  contentCollection,
+  contentCollections,
+} from "../content/content-collections";
+import {
+  collectionCounts,
+  collectionEntryPaths,
+  collectionView,
+  shownCollectionKey,
+} from "../browse/library-pane";
+import { localeLabel, localeOfPath, resolveI18n } from "@jxsuite/schema/locale";
+import { entryLocale } from "../content/collection-pages";
+import { onEntrySummariesRead, peekEntrySummaries } from "../content/entry-summaries";
+import { openEntry } from "../content/entry-open";
+import { workspaceHomeTabId } from "../workspace/workspace-ids";
+import { makeGridTabId, parseGridTabId } from "../grid/grid-source";
+import { applySavedView, listSavedViews } from "../grid/grid-layout";
+import {
+  emptyCollectionsPanelValues,
+  mountCollectionsPanelSurface,
+} from "../surfaces/collections-panel";
+import { registerPanel } from "./panel-registry";
+import type {
+  CollectionEntryRow,
+  CollectionRow,
+  CollectionsPanelActions,
+  CollectionsPanelSurfaceHandle,
+  CollectionsPanelValues,
+} from "../surfaces/collections-panel";
+import type { Tab } from "../tabs/tab";
+
+/** The `source` every command run from here reports under. */
+const SOURCE = "Collections";
+
+/** The grid tab id a collection's saved views are stored under. */
+export function collectionGridId(key: string): string {
+  return key === PAGES_COLLECTION
+    ? makeGridTabId({ kind: "pages" })
+    : makeGridTabId({ kind: "collection", name: key });
+}
+
+/**
+ * The declared collection an entry tab is writing, or `null`: the focused document is a file a
+ * declared collection owns. Pages are Design's, so a page tab lists the collections. A file-backed
+ * collection's file is no entry either: its grid lists its records, so the panel lists the
+ * collections with that one selected.
+ */
+export function writingCollection(tab: Tab | null): string | null {
+  const key = collectionKeyOfPath(tab?.documentPath);
+  return key !== null && key !== PAGES_COLLECTION && !contentCollection(key)?.fileBacked
+    ? key
+    : null;
+}
+
+/** The file-backed collection whose file a tab holds, or `null`. */
+function fileCollectionOf(tab: Tab): string | null {
+  const key = collectionKeyOfPath(tab.documentPath);
+  return key !== null && contentCollection(key)?.fileBacked === true ? key : null;
+}
+
+/** The collection the focused pane is showing, for the list's selected row, or `null`. */
+function shownKey(tab: Tab | null): string | null {
+  if (!tab) {
+    return null;
+  }
+  if (tab.id === workspaceHomeTabId("content")) {
+    return shownCollectionKey();
+  }
+  const grid = parseGridTabId(tab.id);
+  if (grid?.kind === "pages") {
+    return PAGES_COLLECTION;
+  }
+  return grid?.kind === "collection" ? grid.name : fileCollectionOf(tab);
+}
+
+/** The collection list. */
+function collectionRows(tab: Tab | null): CollectionRow[] {
+  const counts = collectionCounts();
+  const selected = shownKey(tab);
+  return contentCollections().map((collection) => {
+    const count = counts?.get(collection.key);
+    return {
+      count: counts === null ? "" : String(count ?? 0),
+      key: collection.key,
+      selected: collection.key === selected ? "true" : "false",
+      title: collection.title,
+      views: listSavedViews(collectionGridId(collection.key)).map((view) => ({
+        key: `${collection.key}\n${view.name}`,
+        name: view.name,
+      })),
+    };
+  });
+}
+
+/** Everything the panel draws right now. */
+export function collectionsPanelValues(): CollectionsPanelValues {
+  const values = emptyCollectionsPanelValues();
+  if (!projectState) {
+    return values;
+  }
+  const tab = activeTab.value;
+  const writing = writingCollection(tab);
+  if (writing === null) {
+    return { ...values, body: "list", collections: collectionRows(tab) };
+  }
+  const collection = contentCollection(writing);
+  const counts = collectionCounts();
+  const paths = collectionEntryPaths(writing);
+  const summaries = counts === null ? null : peekEntrySummaries(writing, paths);
+  /* A multilingual collection's entries say which language each is in, and the list keeps to the
+     language the collection's view is filtered to: three translations of one exhibition are three
+     rows, and an unlabelled list of them reads as one entry listed thrice. */
+  const filter = collectionView(writing).locale;
+  const entries: CollectionEntryRow[] = (summaries ?? []).flatMap((entry) => {
+    const locale = entryLocale(entry.path) ?? "";
+    if (filter !== "" && locale !== filter) {
+      return [];
+    }
+    return [
+      {
+        art: entry.thumb === "" ? "glyph" : "image",
+        lang: locale,
+        locale: locale === "" ? "" : localeLabel(locale),
+        path: entry.path,
+        selected: entry.path === tab?.documentPath ? "true" : "false",
+        status: entry.status,
+        thumb: entry.thumb,
+        title: entry.title,
+      },
+    ];
+  });
+  return {
+    ...values,
+    backTitle: collection?.title ?? writing,
+    backCount: counts === null ? "" : String(paths.length),
+    body: "entries",
+    entries,
+    entriesState: summaries === null ? "loading" : entries.length === 0 ? "empty" : "listed",
+    newLabel: `New ${collection?.item ?? "entry"}`,
+  };
+}
+
+// ─── Actions ─────────────────────────────────────────────────────────────────
+
+/**
+ * Open a collection's grid on a saved view.
+ *
+ * The view is written onto the grid's working layout first, so a grid opened now loads it. A grid
+ * already on screen has loaded its layout, so it is told through `grid.applyView`, the command the
+ * grid's own picker runs.
+ */
+async function applyCollectionView(key: string, name: string): Promise<void> {
+  const gridId = collectionGridId(key);
+  const showing = activeTab.value?.id === gridId;
+  applySavedView(gridId, name);
+  if (showing) {
+    await runActiveReported("grid.applyView", { name }, SOURCE);
+    return;
+  }
+  const { openCollectionGrid, openPagesGrid } = await import("../grid/grid-open");
+  if (key === PAGES_COLLECTION) {
+    openPagesGrid();
+  } else {
+    openCollectionGrid(key);
+  }
+}
+
+const ACTIONS: CollectionsPanelActions = {
+  applyView: (key, name) => {
+    const [collection = ""] = key.split("\n");
+    void applyCollectionView(collection, name);
+  },
+  back: () => {
+    const writing = writingCollection(activeTab.value);
+    if (writing !== null) {
+      void runActiveReported("content.showCollection", { collection: writing }, SOURCE);
+    }
+  },
+  newCollection: () => {
+    void runActiveReported("file.new", { kind: "collection" }, SOURCE);
+  },
+  newEntry: () => {
+    const writing = writingCollection(activeTab.value);
+    void runActiveReported(
+      "file.new",
+      writing === null
+        ? { kind: "entry" }
+        : { collection: writing, kind: "entry", ...newEntryLocale(writing) },
+      SOURCE,
+    );
+  },
+  openEntry: (path) => {
+    void openEntry(path);
+  },
+  showCollection: (key) => {
+    void runActiveReported("content.showCollection", { collection: key }, SOURCE);
+  },
+};
+
+/**
+ * The language a new entry starts in from the entries list: the one the entry being written is in,
+ * else the one the collection's view is filtered to. Nothing when neither says, which leaves the
+ * dialog on the site's default.
+ */
+export function newEntryLocale(collection: string): { locale?: string } {
+  const { i18n } = resolveI18n(projectState?.projectConfig ?? {});
+  const path = activeTab.value?.documentPath ?? null;
+  const own = path === null ? null : localeOfPath(path, i18n);
+  const locale = own ?? collectionView(collection).locale;
+  return locale === "" ? {} : { locale };
+}
+
+// ─── Mounting ────────────────────────────────────────────────────────────────
+
+interface StandingPanel {
+  host: HTMLElement;
+  handle: CollectionsPanelSurfaceHandle;
+}
+
+let _standing: StandingPanel | null = null;
+let _unlisten: (() => void) | null = null;
+
+/** Repaint the Navigator, which repaints this panel when it is the one showing. */
+function repaint(): void {
+  renderOnly("leftPanel");
+}
+
+/** Mount the surface into `host`, or bring the one already there up to date. */
+function mountInto(host: HTMLElement): void {
+  _unlisten ??= onEntrySummariesRead(repaint);
+  if (_standing && (_standing.host !== host || !_standing.handle.connected())) {
+    _standing.handle.dispose();
+    _standing = null;
+  }
+  if (_standing) {
+    _standing.handle.update(collectionsPanelValues());
+    return;
+  }
+  _standing = {
+    handle: mountCollectionsPanelSurface(host, collectionsPanelValues(), ACTIONS),
+    host,
+  };
+}
+
+/**
+ * The Navigator's content area inside a panel body, where a mounted document goes (the reason is
+ * `panels/elements-panel.ts`'s: the body is lit's part, and its child is the box a panel owns).
+ */
+function contentArea(body: HTMLElement): HTMLElement {
+  return body.querySelector<HTMLElement>(".panel-content") ?? body;
+}
+
+/**
+ * Contribute the Collections panel: project level (it lists the project's collections), no rail
+ * button (Content has no rail), the Content workspace's Navigator.
+ */
+export function registerCollectionsPanel(): void {
+  registerPanel({
+    id: "collections",
+    title: "Collections",
+    level: "project",
+    dock: "navigator",
+    icon: "stack",
+    rail: false,
+    render: () => nothing,
+    afterRender: (_ctx, host) => {
+      mountInto(contentArea(host));
+    },
+  });
+}
+
+/** Forget the mounted panel — tests, and a project switch. */
+export function resetCollectionsPanel(): void {
+  _standing?.handle.dispose();
+  _standing = null;
+  _unlisten?.();
+  _unlisten = null;
+}