@jxsuite/studio 8.0.1 → 9.0.0

package/src/canvas/preview-placeholder.ts

@@ -0,0 +1,120 @@
+/// <reference lib="dom" />
+/**
+ * A stand-in picture for an image a component preview has no source for.
+ *
+ * Component previews draw a definition with only its own declared `examples` (`browse/
+ * component-examples.ts`), never with data borrowed from the project. A card component whose image
+ * prop defaults to `""` therefore drew a broken-image glyph — or, worse, an `<img src="">`, which
+ * resolves to the document's own url and fails as an image. Previews show the component's SHAPE, so
+ * an empty image is drawn as a neutral placeholder of a typical photo's proportions instead.
+ *
+ * Used by the two surfaces that draw components on their own: the parent-realm previews
+ * (`panels/component-preview.ts`: the Library, the Site panel's component cards, the palette) and
+ * the Stylebook's specimen render in the canvas frame (`canvas/iframe-render.ts`). Never the page
+ * canvas: an empty image on a page is something its author should see.
+ *
+ * Plain DOM with no realm-specific imports, so the frame and the editor share one definition.
+ */
+
+/**
+ * A neutral landscape glyph: the canvas's one structural gray (`#808080`, as `STYLEBOOK_CSS` uses
+ * it) at low opacity, so it reads as a quiet tint on a light card and a dark one alike. A `data:`
+ * image is a document of its own, which no theme token or custom property can reach into.
+ */
+export const PREVIEW_IMAGE_PLACEHOLDER = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="320" height="180" viewBox="0 0 320 180">' +
+    '<rect width="320" height="180" fill="#808080" fill-opacity="0.16"/>' +
+    '<g fill="#808080" fill-opacity="0.38">' +
+    '<circle cx="118" cy="64" r="14"/>' +
+    '<path d="M60 140l52-50 34 30 38-46 76 66z"/>' +
+    "</g></svg>",
+)}`;
+
+/** Marks an `<img>` whose source is the placeholder, so a later real source is told apart. */
+export const PLACEHOLDER_ATTR = "data-jx-image-placeholder";
+
+/** Whether an image names no source at all: a blank `src` (or none) and a blank `srcset`. */
+export function hasNoImageSource(img: HTMLImageElement): boolean {
+  const src = img.getAttribute("src")?.trim() ?? "";
+  const srcset = img.getAttribute("srcset")?.trim() ?? "";
+  if (src !== "" || srcset !== "") {
+    return false;
+  }
+  // A <picture>'s <source srcset> picks the image even when the <img> itself names none.
+  const picture = img.parentElement?.localName === "picture" ? img.parentElement : null;
+  return !picture?.querySelector("source[srcset]:not([srcset=''])");
+}
+
+/** Give one image the placeholder when it has no source; clear the mark once it has a real one. */
+function fill(img: HTMLImageElement): void {
+  if (hasNoImageSource(img)) {
+    img.setAttribute(PLACEHOLDER_ATTR, "");
+    img.setAttribute("src", PREVIEW_IMAGE_PLACEHOLDER);
+  } else if (
+    img.hasAttribute(PLACEHOLDER_ATTR) &&
+    img.getAttribute("src") !== PREVIEW_IMAGE_PLACEHOLDER
+  ) {
+    img.removeAttribute(PLACEHOLDER_ATTR);
+  }
+}
+
+/**
+ * Whether an element is an `<img>`. By tag name rather than `instanceof`: the Stylebook's frame is
+ * another realm, whose `HTMLImageElement` is not this module's.
+ */
+function isImage(element: Element): element is HTMLImageElement {
+  return element.localName === "img";
+}
+
+/** Every `<img>` at or under `node`. */
+function imagesIn(node: Node): HTMLImageElement[] {
+  if (node.nodeType !== node.ELEMENT_NODE || !("querySelectorAll" in node)) {
+    return [];
+  }
+  // SAFETY: an ELEMENT_NODE with `querySelectorAll` is an Element, in whichever realm it lives.
+  const element = node as Element;
+  const found = [...element.querySelectorAll("img")];
+  return isImage(element) ? [element, ...found] : found;
+}
+
+/**
+ * Fill every source-less image under `root` with {@link PREVIEW_IMAGE_PLACEHOLDER}, now and as the
+ * tree changes: a component draws its own children in its `connectedCallback`, after the preview
+ * element is created, and a binding can clear an image's source later. A real source always wins —
+ * the placeholder only ever replaces nothing. Returns a function that stops watching.
+ */
+export function fillPreviewImages(root: Element): () => void {
+  for (const img of imagesIn(root)) {
+    fill(img);
+  }
+  /* The root's own realm's observer where it has one (the Stylebook's frame); this realm's for a
+     document with no window, such as a parsed one — an observer watches any same-origin node. */
+  const Observer = root.ownerDocument.defaultView?.MutationObserver ?? MutationObserver;
+  const observer = new Observer((records) => {
+    for (const record of records) {
+      if (record.type === "attributes") {
+        const { target } = record;
+        if (target.nodeType === target.ELEMENT_NODE && "localName" in target) {
+          // SAFETY: an ELEMENT_NODE target with `localName` is an Element (attributes only land on elements).
+          const element = target as Element;
+          if (isImage(element)) {
+            fill(element);
+          }
+        }
+        continue;
+      }
+      for (const added of record.addedNodes) {
+        for (const img of imagesIn(added)) {
+          fill(img);
+        }
+      }
+    }
+  });
+  observer.observe(root, {
+    attributeFilter: ["src", "srcset"],
+    attributes: true,
+    childList: true,
+    subtree: true,
+  });
+  return () => observer.disconnect();
+}

package/src/collab/collab-session.ts

@@ -26,7 +26,7 @@ import { jsonClone } from "../utils/studio-utils";
 import { cloneSelection } from "../tabs/selection";
 import {
   applyExternalDocOps,
-  isBatching,
+  isBatched,
   setBatchEndNotifier,
   setHistoryDelegate,
   setTransactGate,
@@ -318,7 +318,11 @@ function onBatchEnd(tab: Tab): void {
 
 function publishRecord(session: ActiveSession, record: TransactionRecord): void {
   const forward = record.docOps.map((pair) => pair.forward);
-  if (isBatching()) {
+  /* Buffered only while THIS tab has a lane segment open, which means the transaction just
+     observed was the lane owner's: anyone else's write closes the segment before it runs, and the
+     close flushes the buffer, so the Y document receives the owner's ops before the other writer's
+     and in local order. */
+  if (isBatched(session.tab)) {
     session.batchOps ??= [];
     if (forward.length === 0) {
       session.batchNeedsDiff = true;

package/src/commands/context.ts

@@ -31,6 +31,9 @@ export const CAPABILITIES = [
   "gitClone",
   "importSite",
   "openProjectInNewWindow",
+  /* Open Project's gate: a native dialog or the cloud's repository picker. A dev-server window opens
+     its project from `?project=`, so the command is not offered there. */
+  "openProject",
   "dataRows",
   "windowControls",
   "findReferences",
@@ -339,6 +342,7 @@ export function emptyContext(): CommandContext {
       gitClone: false,
       importSite: false,
       openProjectInNewWindow: false,
+      openProject: false,
       dataRows: false,
       windowControls: false,
       findReferences: false,

package/src/commands/defaults.ts

@@ -563,6 +563,8 @@ export function defaultCommands(deps: CommandDeps): AnyCommand[] {
       keybinding: "mod+o",
       menus: ["commandbar/overflow", "statusbar/project", "palette"],
       group: "1_file",
+      when: (ctx: CommandContext) => ctx.capability.openProject,
+      requires: "a host that can open a project from a dialog",
       run: () => deps.openProject(),
     },
     {

package/src/commands/live-context.ts

@@ -38,6 +38,7 @@ import { collabState } from "../collab/collab-state";
 
 import { canvasViewForMode, editorKindForMode, emptyContext } from "./context";
 import type { CommandContext } from "./context";
+import { canOpenProject } from "../platform";
 import type { StudioPlatform } from "../types";
 
 /** Elements that own the keyboard while focused. Matches the old listener's target test exactly. */
@@ -95,6 +96,7 @@ function capabilities(platform: StudioPlatform | null): CommandContext["capabili
     findReferences: has("findReferences"),
     gitClone: has("gitClone"),
     importSite: has("importSite"),
+    openProject: canOpenProject(platform),
     openProjectInNewWindow: has("openProjectInNewWindow"),
     readFileBytes: has("readFileBytes"),
     publish: has("cfApi"),

package/src/editor/shortcuts.ts

@@ -1010,6 +1010,9 @@ const SELF_SCROLLING_MODES: ReadonlySet<string> = new Set([
   "media-home",
   "preview",
   "publish-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/files.ts

@@ -39,7 +39,7 @@ import { errorMessage } from "@jxsuite/schema/parse";
 import { localeLabel, localeOfPath, resolveI18n } from "@jxsuite/schema/locale";
 import { showPromptDialog } from "../ui/layers";
 import { projectState, requireProjectState, setProjectState } from "../store";
-import { getPlatform } from "../platform";
+import { canOpenProject, getPlatform } from "../platform";
 import { disarmPreviewOverlay } from "../preview/preview-overlay";
 import { notify } from "../services/notify";
 import { loadComponentRegistry } from "./components";
@@ -309,7 +309,8 @@ export async function openProject({
 }): Promise<boolean> {
   try {
     const platform = getPlatform();
-    const result = await platform.openProject();
+    // The command is gated on the capability, so a host without the member never gets here.
+    const result = await platform.openProject?.();
     if (!result) {
       return false;
     } // User cancelled
@@ -864,7 +865,9 @@ function filesPanelValues(): FilesPanelValues {
   }
   if (!projectState.isSiteProject && projectState.projectRoot === ".") {
     _fileRows = [];
-    const values: FilesPanelValues = { ...emptyFilesPanelValues(), view: "welcome" };
+    // A host with no Open Project (the dev server) is told how its windows DO open one instead.
+    const view = canOpenProject(getPlatform()) ? "welcome" : "address";
+    const values: FilesPanelValues = { ...emptyFilesPanelValues(), view };
     _lastValues = values;
     return values;
   }

package/src/new-project/new-project-modal.ts

@@ -346,10 +346,7 @@ function finish(result: { root: string; config: ProjectConfig } | null) {
  * runs this same sequence itself.
  */
 async function finishCreated(result: { root: string; config: ProjectConfig }) {
-  const { adopted, error, openedElsewhere } = await adoptCreatedProject(result.root, {
-    // The wizard runs outside the agent loop — there is never a batch to flush and re-anchor.
-    getTab: () => null,
-  });
+  const { adopted, error, openedElsewhere } = await adoptCreatedProject(result.root);
   if (!adopted && !openedElsewhere) {
     notify.warn(
       "Created the project, but could not open it here.",

package/src/panels/ai-panel.ts

@@ -28,13 +28,13 @@
 
 import { effect, effectScope } from "../reactivity";
 import { createDocumentAssistant } from "../services/document-assistant";
-import { writesForTurn } from "../services/ai-writes";
+import { restoreTurn } from "../services/ai-writes";
+import { isString } from "@jxsuite/schema/guards";
 import { notify } from "../services/notify";
-import { undo } from "../tabs/transact";
+import type { NotifyOptions } from "../services/notify";
 import { activeTab } from "../workspace/workspace";
 import { setOpenAiKey } from "../services/ai-settings";
 import { hasAiCredentials } from "../services/ai-models";
-import { answerAsk, isAwaitingAnswer, pendingAsk, skipAsk } from "../services/ai-ask";
 import { activeImportRun, importRun } from "../services/import-run";
 import type { ImportBrief } from "../services/import-seed";
 import type { ImportBreakpointPolicy } from "../types";
@@ -124,7 +124,7 @@ export function bindAiPanelHost(el: HTMLElement | null) {
     run: runCommand,
     send: () => composer.send(),
     skip: () => {
-      skipAsk();
+      assistant.interactions.skip();
       renderAiPanel();
     },
     stop,
@@ -208,10 +208,10 @@ function watchAssistant() {
       // The registry is composed AFTER the bootstrap mounts this, and it is a reactive holder —
       // Reading it here is what turns the header's skeleton into its real buttons.
       void activeRegistry();
-      // The question is not chat state — it lives in `services/ai-ask.ts` — but it is drawn into
-      // This panel, so the same effect has to track it or a question would appear a turn late
-      // (and its ANSWER would never repaint the card at all).
-      void pendingAsk();
+      // The question is not chat state — it lives in the assistant's interaction store — but it is
+      // Drawn into this panel, so the same effect has to track it or a question would appear a turn
+      // Late (and its ANSWER would never repaint the card at all).
+      void assistant.interactions.pending;
       /* The run record, for the same reason: an import reports a line at a time from a store that
          is not chat state, and its chip has to follow every one of them. Reading the ACTIVE run
          tracks the whole record, so any field moving re-projects. */
@@ -268,7 +268,7 @@ async function handleAssistantSend(text: string) {
   }
   /* Answering comes first: a question is put by a turn that is still running, so a send while one
      waits is its answer, never a second turn. */
-  if (answerAsk(text.trim())) {
+  if (assistant.interactions.answer(text.trim())) {
     surface?.pin();
     renderAiPanel();
     return;
@@ -319,38 +319,31 @@ async function handleRetry(): Promise<void> {
 /**
  * Undo everything one assistant turn changed — ai.md §3.2's "Restore to here".
  *
- * The loop opens one batch per turn per document, so undoing the turn is undoing that batch. The
- * button is offered by the projection only when every recorded change was transactional; this guard
- * is the second half of the same promise, because a ledger can be trimmed (MAX_TURNS) between the
- * projection and the click and a Restore that silently restored SOME of a turn would be worse than
- * one that refused.
+ * The turn's batch lane left one step per document it wrote, and {@link restoreTurn} takes each
+ * back while it is still the top of its tab's history, or refuses the whole turn with a sentence.
+ * The button is offered by the projection only when every recorded change was transactional; the
+ * refusals are the second half of the same promise, because a ledger can be trimmed (MAX_TURNS) and
+ * a document edited between the projection and the click.
  *
  * @param {string} messageId
  */
 /* Exported so the guard can be exercised directly: the button is not DRAWN for a turn that touched
    disk, which would otherwise make the refusal path unreachable from the panel. */
 export function handleRestore(messageId: string): void {
-  const writes = writesForTurn(messageId);
-  if (writes.length === 0) {
-    notify.warn("There is no longer a record of what that turn changed.", { source: "Assistant" });
+  const restored = restoreTurn(messageId);
+  if (isString(restored)) {
+    notify.warn(restored, { source: "Assistant" });
     return;
   }
-  const disk = writes.filter((w) => w.disk).map((w) => w.path);
-  if (disk.length > 0) {
-    notify.warn(
-      `Cannot restore: ${disk.join(", ")} ${disk.length === 1 ? "was" : "were"} written straight ` +
-        "to disk, which undo cannot reach.",
-      { source: "Assistant" },
-    );
-    return;
-  }
-  const tab = activeTab.value;
-  if (!tab) {
-    notify.warn("Open the document that turn edited to restore it.", { source: "Assistant" });
-    return;
+  /* Redo reaches the active tab only, so it is offered only when that is the one tab restored;
+     across documents it would bring back part of the turn. */
+  const [only, ...rest] = restored;
+  const redoable = rest.length === 0 && only === activeTab.value;
+  const options: NotifyOptions = { source: "Assistant" };
+  if (redoable) {
+    options.action = "edit.redo";
   }
-  undo(tab);
-  notify.success("Restored to before that turn.", { action: "edit.redo", source: "Assistant" });
+  notify.success("Restored to before that turn.", options);
   renderAiPanel();
 }
 
@@ -509,7 +502,7 @@ export function revealAssistant(): void {
  * turn waiting forever on a question nobody wants to answer is exactly what Stop is for.
  */
 export function isAssistantWaiting(): boolean {
-  return isAwaitingAnswer();
+  return assistant.interactions.pending !== null;
 }
 
 /**
@@ -617,7 +610,7 @@ function projectPanel(): AiChatView {
   const advice = error ? formatErrorAdvice(error) : "";
   const newChatCommand = projectCommand("assistant.newChat", { icon: "plus" });
   const rows = projectRows({
-    ask: { importRun, pendingId: pendingAsk()?.id ?? null },
+    ask: { importRun, pendingId: assistant.interactions.pending?.callId ?? null },
     messages: cs.messages,
     status: cs.status,
   });

package/src/panels/component-preview.ts

@@ -8,6 +8,7 @@
 
 import { defineElement, setSkipServerFunctions } from "@jxsuite/runtime";
 import { projectState } from "../store";
+import { fillPreviewImages } from "../canvas/preview-placeholder";
 import type { ComponentEntry } from "../files/components";
 import type { JsonValue } from "@jxsuite/schema/types";
 
@@ -43,6 +44,10 @@ export async function renderComponentPreview(
     for (const [name, value] of props) {
       properties[name] = value;
     }
+    /* Watched from now on: the instance draws its children when it connects, after this returns.
+       A preview shows the component's shape, so an image it has no source for is a placeholder,
+       not a broken glyph (`canvas/preview-placeholder.ts`). */
+    fillPreviewImages(el);
     return el;
   } catch (error) {
     console.warn("Component preview failed:", comp.tagName, error);

package/src/panels/pane-context.ts

@@ -105,6 +105,7 @@ import { componentPropEntries, isComponentDoc } from "../component-props";
 import { mediaDisplayName } from "./shared";
 import type { CanvasView, FitMode } from "../canvas/canvas-utils";
 import { EDITOR_KIND_LABELS } from "../commands/context";
+import type { EditorKind } from "../commands/context";
 import type { ParamValues } from "../page-params";
 import type { CommandArgValues } from "../commands/command-args";
 import type { Tab } from "../tabs/tab";
@@ -781,22 +782,40 @@ function lensSummary(paneId: string): string {
 
 // ─── Axis 1 · Editor kind ────────────────────────────────────────────────────
 
+/**
+ * Editor kinds that are entered by a gesture elsewhere and never offered as a choice.
+ *
+ * A comparison (`diff`) is opened from Publish's changed files or its version history, which says
+ * what it is compared against; a Diff segment on every document would compare whatever is open
+ * against whatever HEAD is, and was a third way into a view two browsers already own. While a tab
+ * is IN one, the axis names it and offers nothing: the way out is Back, beside it.
+ */
+const IMPLICIT_EDITOR_KINDS: ReadonlySet<EditorKind> = new Set(["diff"]);
+
 function editorAxis(tab: Tab): Partial<PaneContextView> {
   /* What the DOCUMENT declares, and nothing else. This read `hostableKindsOf` — the declared kinds
      narrowed by what the tab's pane was allowed to host — so a page in the side pane was offered
      Code and not Design. The pane cap is gone; a control that cannot go anywhere is still the
      defect this axis exists to remove, and one declared kind still renders as text. */
-  const kinds = editorKindsOf(tab);
   const current = editorKindOf(tab);
+  const kinds = IMPLICIT_EDITOR_KINDS.has(current)
+    ? [current]
+    : editorKindsOf(tab).filter((kind) => !IMPLICIT_EDITOR_KINDS.has(kind));
   if (kinds.length < 2) {
-    // One kind is not a choice. Rendering it as a dropdown would be a control that cannot move —
+    // One kind is not a choice. Rendering it as a segmented group would be a control that cannot move —
     // Which is the defect this axis exists to remove, in miniature.
-    return { editorLabel: EDITOR_KIND_LABELS[current], editorMode: "static" };
+    return { editorLabel: EDITOR_KIND_LABELS[current], editorMode: "static", editorState: "shown" };
   }
   return {
     editorMode: "picker",
-    editorOptions: kinds.map((kind) => ({ label: EDITOR_KIND_LABELS[kind], value: kind })),
-    editorValue: current,
+    editorState: "shown",
+    editors: kinds.map((kind) => ({
+      checked: kind === current ? "true" : "false",
+      hint: `Open this document in ${EDITOR_KIND_LABELS[kind]}`,
+      key: kind,
+      label: EDITOR_KIND_LABELS[kind],
+      value: kind,
+    })),
   };
 }
 
@@ -895,25 +914,26 @@ function contextAxis(tab: Tab, paneId: string, ctx: PaneContextCtx): Partial<Pan
   const plainQueries = featureQueries.filter(({ query }) => !isSchemeQuery(query));
   const scheme = ui.previewColorScheme;
   const { activeMedia } = ui;
-  const sizeLabel = activeMedia ? mediaDisplayName(activeMedia) : "Base";
-  const schemeLabel = SCHEMES.find(([value]) => value === scheme)?.[1] ?? "Auto";
   const locale = localeOf(tab);
-  /* The language joins the trigger ONLY when the pane is not drawing the document's own — a French
-     page open in a French pane is not a rendering context worth three more characters, and a bar
-     that grew a third term in every multilingual project would stop reading as a state. */
-  const contextSummary = [
-    sizeLabel,
-    schemeQueries.length > 0 ? schemeLabel : null,
-    locale?.overridden ? localeLabel(locale.effective) : null,
-  ]
-    .filter((part) => part !== null)
-    .join(" · ");
   /* An entry written on the canvas is wrapped in its template's layout like a page (§22.5), so it
      offers the same "show layout" choice. Whether a layout resolves for it is read asynchronously
      by the canvas; the project default is the answer this bar can give synchronously. */
   const hasLayout =
     (isPageDoc(tab) && Boolean(getEffectiveLayoutPath(tab.doc.document.$layout))) ||
     (Boolean(projectState?.isSiteProject) && writesEntryOnCanvas(tab.documentPath));
+  /* The trigger names only what its popover holds and is NOT at rest. Size and scheme are on the bar
+     as groups now, so repeating them here would print the same state twice; and a trigger that read
+     "Base · Auto" over a popover that no longer offers either would be describing another control.
+     The language joins ONLY when the pane is not drawing the document's own — a French page open in
+     a French pane is not a rendering context worth three more characters. */
+  const featuresOn = plainQueries.filter(({ name }) => ui.featureToggles[name]).length;
+  const contextSummary = [
+    locale?.overridden ? localeLabel(locale.effective) : null,
+    featuresOn > 0 ? `${featuresOn} ${featuresOn === 1 ? "query" : "queries"}` : null,
+    hasLayout && ui.showLayout === false ? "No layout" : null,
+  ]
+    .filter((part) => part !== null)
+    .join(" · ");
   const page = isPageDoc(tab);
   const params = page ? paramRows(tab) : [];
   const props = page ? [] : propRows(tab, paneId);
@@ -952,6 +972,8 @@ function contextAxis(tab: Tab, paneId: string, ctx: PaneContextCtx): Partial<Pan
     })) satisfies PaneContextChoice[],
     schemeState: schemeQueries.length > 0 ? "shown" : "hidden",
     sizes: sizeRows(sizeBreakpoints, activeMedia),
+    // Base alone is not a choice: a one-segment group would be a control that cannot move.
+    sizesState: sizeBreakpoints.length > 0 ? "shown" : "hidden",
   };
 }
 
@@ -1134,7 +1156,10 @@ function actionsFor(paneId: string, ctx: PaneContextCtx): PaneContextActions {
       if (!tab) {
         return;
       }
-      const editorKind = editorKindsOf(tab).find((candidate) => candidate === kind);
+      // An implicit kind is refused like an undeclared one: the axis never offers it.
+      const editorKind = editorKindsOf(tab).find(
+        (candidate) => candidate === kind && !IMPLICIT_EDITOR_KINDS.has(candidate),
+      );
       const mode = editorKind && modeForEditorKind(tab, editorKind);
       if (!mode) {
         return;

package/src/panels/site-model.ts

@@ -3,8 +3,8 @@
  *
  * The panel lists the project as an author thinks of it: pages by address, then the templates,
  * components and media pages are made of. Everything here turns facts the flow has already gathered
- * (paths, `$paths.contentType`, entry counts, usage counts) into the rows the surface draws, so the
- * ordering, the nesting, the labels and the filter are testable without a project.
+ * (paths, `$paths.contentType`, entry counts) into the rows the surface draws, so the ordering, the
+ * nesting, the labels and the filter are testable without a project.
  *
  * **Routes come from the router.** Rows are ordered and labelled with `fileToRoute` and
  * `compareRoutes` from `@jxsuite/site/routes` — the functions the build's page discovery sorts with
@@ -64,7 +64,7 @@ export interface SiteTemplateRow {
   key: string;
   path: string;
   label: string;
-  /** "used by N pages", or empty where the host has no reference index (the count is omitted). */
+  /** "default layout" for the project's `defaults.layout`, else empty. */
   detail: string;
   selected: SiteSelected;
 }
@@ -320,28 +320,16 @@ export function filterPageRows(rows: readonly SitePageRow[], needle: string): Si
   return kept;
 }
 
-/** "used by 3 pages", "used by 1 page", "not used yet", or "" when the count is unknown. */
-export function usedByLabel(pages: number | null): string {
-  if (pages === null) {
-    return "";
-  }
-  if (pages === 0) {
-    return "not used yet";
-  }
-  return `used by ${pages} ${pages === 1 ? "page" : "pages"}`;
-}
-
 /**
  * The Templates section's rows: every JSON layout under `layouts/`, by path. Layouts are JSON only
  * (the layout resolver parses nothing else), so a non-JSON file there is not a template.
  *
- * The project's default layout (`defaults.layout`) says so instead of a count: every page that
- * names no layout uses it without referencing it, so the reference index's count would read "not
- * used yet" for the layout most pages are poured into.
+ * The project's default layout (`defaults.layout`) says so. No row says how many pages use it:
+ * counting would ask the reference index once per template on every paint, which is a project-wide
+ * sweep per row (`specs/studio.md` §5.7).
  */
 export function templateRows(
   paths: readonly string[],
-  usedBy: (path: string) => number | null,
   activePath: string | null,
   needle: string,
   defaultPath: string | null = null,
@@ -356,7 +344,7 @@ export function templateRows(
       }
       return [
         {
-          detail: path === defaultPath ? "default layout" : usedByLabel(usedBy(path)),
+          detail: path === defaultPath ? "default layout" : "",
           key: path,
           label,
           path,

package/src/panels/site-panel.ts

@@ -48,7 +48,6 @@ import { previewFileSrc } from "../files/media-paths";
 import { elementForAsset } from "../editor/file-drop-action";
 import { readPageFacts } from "../content/collection-pages";
 import { listCollectionEntryIds } from "../grid/sources/content-source";
-import { loadUsages, onUsagesInvalidated, peekUsages, splitUsages } from "../services/references";
 import { projectMediaFiles } from "../ui/media-picker";
 import { runActiveReported } from "../commands/run-reported";
 import { emptySitePanelValues, mountSitePanelSurface } from "../surfaces/site-panel";
@@ -312,16 +311,6 @@ function defaultLayoutPath(): string | null {
   return isString(layout) ? layout.replace(/^\.\//, "") : null;
 }
 
-/** How many pages use a template, from the reference index — `null` where it cannot say yet. */
-function templateUsage(path: string): number | null {
-  const state = peekUsages({ path });
-  if (state === null) {
-    void loadUsages({ path }).then(repaint);
-    return null;
-  }
-  return state.status === "ready" ? splitUsages(state.result).pages : null;
-}
-
 // ─── The view ────────────────────────────────────────────────────────────────
 
 /** The filter, as typed. One per window: the panel is project-level and there is one project. */
@@ -366,12 +355,8 @@ export function sitePanelValues(): SitePanelValues {
     : [];
   const pages = filterPageRows(allPages, needle);
   const defaultLayout = defaultLayoutPath();
-  const allTemplates = index
-    ? templateRows(index.layouts, templateUsage, activePath, "", defaultLayout)
-    : [];
-  const templates = index
-    ? templateRows(index.layouts, templateUsage, activePath, needle, defaultLayout)
-    : [];
+  const allTemplates = index ? templateRows(index.layouts, activePath, "", defaultLayout) : [];
+  const templates = index ? templateRows(index.layouts, activePath, needle, defaultLayout) : [];
   const registryLoading = !_componentRegistryLoaded;
   const allComponents = componentRows("", activePath);
   const components = componentRows(needle, activePath);
@@ -537,9 +522,6 @@ export function mediaDragData(path: string): BlockDragData | null {
 
 /** Mount the surface into `host`, or bring the one already there up to date. */
 function mountInto(host: HTMLElement): void {
-  /* A page created, saved or deleted changes how many pages use a template, and the usage cache is
-     dropped for it: the Templates rows ask again on the repaint this asks for. */
-  _usagesUnlisten ??= onUsagesInvalidated(repaint);
   if (_standing && (_standing.host !== host || _standing.handle?.connected() === false)) {
     dispose(_standing);
     _standing = null;
@@ -585,9 +567,6 @@ function mountInto(host: HTMLElement): void {
   });
 }
 
-/** The usage-invalidation subscription, taken once the panel first mounts. */
-let _usagesUnlisten: (() => void) | null = null;
-
 /** Repaint the Navigator, which repaints this panel when it is the one showing. */
 function repaint(): void {
   renderOnly("leftPanel");
@@ -625,8 +604,6 @@ export function resetSitePanel(): void {
     dispose(_standing);
   }
   _standing = null;
-  _usagesUnlisten?.();
-  _usagesUnlisten = null;
   _filter = "";
   _epoch += 1;
   _index = null;