@jxsuite/studio 6.1.1 → 8.0.0

package/src/settings/css-vars-editor.ts

@@ -11,8 +11,16 @@
  * **The markup left.** The section is the `settings-css-vars` surface
  * (`surfaces/settings-css-vars.json`), mounted by `surfaces/settings-css-vars.ts`; what is here is
  * the part that was always this module's — what a row shows, what an edit writes, and what a failed
- * write says. `renderCssVarsEditor` is unchanged as a contract: the registry hands a container to a
- * `render`, and this one mounts a document into it instead of rendering lit.
+ * write says. `renderCssVarsEditor` is unchanged as a contract: it is handed a container and mounts
+ * a document into it instead of rendering lit.
+ *
+ * **Its host is the Styles workspace's Variables view** (`style/variables-view.ts`, §7.1), the
+ * `tokens` editor of the `project.json` tab. It was Project Settings › CSS Variables, and its
+ * persistence did not change with the move: an edit is committed through the configuration
+ * chokepoint (`updateSiteConfig` → `commitProjectConfig`) as it is made, which writes the whole
+ * document, so an element style edit the Elements view left unsaved on the same tab is written too
+ * and the tab comes back clean. The view says so in as many words, rather than letting the Save
+ * button's state be the first the author hears of it.
  *
  * Three things it does NOT do, each on purpose:
  *
@@ -26,8 +34,9 @@
  *   change" true of the specimen canvas as well as the page one.
  */
 
+import { isNumber, isString } from "@jxsuite/schema/guards";
 import { errorMessage } from "@jxsuite/schema/parse";
-import { notify } from "../services/notify";
+import { runActiveReported } from "../commands/run-reported";
 import { projectState } from "../store";
 import { getEffectiveMedia, updateSiteConfig } from "../site-context";
 import {
@@ -36,12 +45,15 @@ import {
   groupTokens,
   listTokenContexts,
   readTokenOverride,
-  tokenLabel,
   writeTokenOverride,
 } from "../style/project-styles";
 import { resolveTokenValue, toTokenRef, tokenRefName } from "../style/token-ref";
 import { pushProjectStylesToCanvas } from "../style/live-preview";
-import { renderCssVarsSurface } from "../surfaces/settings-css-vars";
+import {
+  renderCssVarsSurface,
+  revealCssVarsGroup,
+  revealCssVarsToken,
+} from "../surfaces/settings-css-vars";
 import { friendlyNameToVar } from "../utils/studio-utils";
 
 import type { JxStyle, ProjectConfig } from "@jxsuite/schema/types";
@@ -88,6 +100,8 @@ const ADD_OVERRIDE_ROW = { label: "Add override…", value: "" };
 interface Form {
   add: Partial<Record<TokenGroupId, { name: string; value: string }>>;
   error: string;
+  /** The token the Outline pointed this editor at ({@link focusCssVar}), or `null`. */
+  current: string | null;
 }
 
 const forms = new WeakMap<HTMLElement, Form>();
@@ -96,7 +110,7 @@ const forms = new WeakMap<HTMLElement, Form>();
 function form(container: HTMLElement): Form {
   let state = forms.get(container);
   if (!state) {
-    state = { add: {}, error: "" };
+    state = { add: {}, current: null, error: "" };
     forms.set(container, state);
   }
   return state;
@@ -110,7 +124,7 @@ function pending(container: HTMLElement, group: TokenGroupId): { name: string; v
 
 /** The live project configuration, or an empty one before a project is open. */
 function config(): ProjectConfig {
-  return (projectState?.projectConfig || {}) as ProjectConfig;
+  return projectState?.projectConfig || {};
 }
 
 /**
@@ -121,7 +135,7 @@ function config(): ProjectConfig {
  * write, because there is no object here for it to have been written into.
  */
 function style(): JxStyle {
-  return (config().style || {}) as JxStyle;
+  return config().style || {};
 }
 
 /** Every rendering context this project declares, schemes first. */
@@ -159,10 +173,18 @@ async function persist(container: HTMLElement): Promise<void> {
 // ─── Projection ──────────────────────────────────────────────────────────────
 
 /** The colour a well is painted, and the colour the native input under it opens on. */
-function well(
-  resolved: string | number | undefined,
-  fallback: string,
-): { swatchBg: string; swatchInput: string } {
+interface SwatchWell {
+  /** The resolved value as a CSS background, or `transparent` when the token resolves to nothing. */
+  swatchBg: string;
+  /**
+   * What the native colour input opens on: the background when it is a hex colour, else the
+   * fallback.
+   */
+  swatchInput: string;
+}
+
+/** Paint one well from what the token resolves to. */
+function well(resolved: string | number | undefined, fallback: string): SwatchWell {
   const swatchBg = resolved === undefined ? "transparent" : String(resolved);
   return { swatchBg, swatchInput: swatchBg.startsWith("#") ? swatchBg : fallback };
 }
@@ -188,11 +210,11 @@ function overrideRow(
   const current = readTokenOverride(rootStyle, context, token.name);
   return {
     ctx: context.name,
-    fieldLabel: `${token.label} in ${context.label}`,
+    fieldLabel: `${token.name} in ${context.label}`,
     id: `${token.name} ${context.name}`,
     kind: context.kind,
     label: context.label,
-    swatchLabel: `${token.label} in ${context.label}`,
+    swatchLabel: `${token.name} in ${context.label}`,
     swatchState: isColor ? "swatch" : "none",
     token: token.name,
     value: current === undefined ? "" : String(current),
@@ -208,6 +230,10 @@ function overrideRow(
  * in dark mode" is a question a palette is always answering. A token with no value is offered no
  * picker: writing an empty override is how one is CLEARED, so the affordance would be inert.
  *
+ * A row is NAMED by its custom property, `--color-accent`, never by a friendly rewording of it: the
+ * Outline beside the view lists the same `--name`, a `var()` reference spells it, and it is what
+ * CSS reads. The same goes for a reference chip, which names the property the value follows.
+ *
  * @param {ProjectToken} token
  * @param {TokenGroup} group
  * @param {JxStyle} rootStyle
@@ -219,6 +245,7 @@ function tokenRow(
   group: TokenGroup,
   rootStyle: JxStyle,
   declared: TokenContext[],
+  current: string | null,
 ): TokenRowView {
   const isColor = group.id === "color";
   const value = String(token.value);
@@ -231,25 +258,26 @@ function tokenRow(
   );
   const addable = value === "" ? [] : addableContexts(rootStyle, declared, token.name, shown);
   return {
-    addLabel: `Add an override for ${token.label}`,
+    addLabel: `Add an override for ${token.name}`,
     addOptions: [ADD_OVERRIDE_ROW, ...addable.map((c) => ({ label: c.label, value: c.name }))],
     addPick: "",
     addState: addable.length === 0 ? "none" : "shown",
-    chipLabel: refName === null ? "" : tokenLabel(refName),
+    chipLabel: refName ?? "",
     chipState: refName === null ? "none" : isColor && resolved !== undefined ? "swatch" : "plain",
     chipSwatch: resolved === undefined ? "" : String(resolved),
     chipTitle:
       refName === null
         ? ""
         : `${toTokenRef(refName)} → ${resolved === undefined ? "unresolved" : String(resolved)}`,
-    label: token.label,
+    current: token.name === current,
+    label: token.name,
     name: token.name,
     overrides: shown.map((context) => overrideRow(token, context, isColor, rootStyle)),
     overrideState: shown.length === 0 && addable.length === 0 ? "none" : "shown",
     previewFont: group.id === "font" ? value : "",
     previewState: group.id === "font" ? "font" : "none",
-    removeLabel: `Delete ${token.label}`,
-    swatchLabel: `${token.label} colour`,
+    removeLabel: `Delete ${token.name}`,
+    swatchLabel: `${token.name} color`,
     swatchState: isColor ? "swatch" : "none",
     value,
     ...well(isColor ? resolved : undefined, COLOR_INPUT_FALLBACK),
@@ -288,7 +316,9 @@ function view(container: HTMLElement): CssVarsView {
       nameLabel: `New ${group.title} name`,
       noticeState: group.id === "color" && !hasScheme ? "shown" : "none",
       title: group.title,
-      tokens: tokens.map((token) => tokenRow(token, group, rootStyle, declared)),
+      tokens: tokens.map((token) =>
+        tokenRow(token, group, rootStyle, declared, form(container).current),
+      ),
       valueHint: ADD_ROW_HINTS[group.id].value,
       valueLabel: `New ${group.title} value`,
     });
@@ -344,13 +374,26 @@ function addOverride(container: HTMLElement, token: string, ctx: string): void {
     return;
   }
   const base = rootStyle[token];
-  if (typeof base !== "string" && typeof base !== "number") {
+  if (!isString(base) && !isNumber(base)) {
     return;
   }
   writeTokenOverride(rootStyle, context, token, String(base));
   commit(container);
 }
 
+/**
+ * Open Project Settings on Contexts, where the color schemes and breakpoints this editor overrides
+ * per token are defined.
+ *
+ * Through the command rather than by writing the registry's section: the editor is hosted outside
+ * Settings (the Styles workspace's Variables view), so selecting a section of a dialog that is not
+ * open would change nothing the reader can see. A refusal is filed under "Styles", the workspace
+ * the editor lives in, as the Variables view's own button files it.
+ */
+function openContextsSection(): void {
+  void runActiveReported("settings.open", { section: "contexts" }, "Styles");
+}
+
 /**
  * What the reader may do, bound to one container.
  *
@@ -374,17 +417,11 @@ function actions(container: HTMLElement): CssVarsActions {
        * point at the place a scheme is DEFINED. It used to define one itself — a button here
        * appended `'--dark': '(prefers-color-scheme: dark)'` to `$media` without ever using the word
        * breakpoint, which made this form the fourth and least discoverable definition site for a
-       * map whose other three lived in the wizard, Overview and Properties › Media. The lazy import
-       * breaks the css-vars-editor ↔ section-registry cycle.
+       * map whose other three lived in the wizard, Overview and Properties › Media. It goes there
+       * through `settings.open`, so the dialog opens on Contexts however this editor is hosted.
        */
       manageContexts: () => {
-        void import("./section-registry")
-          .then(({ setSettingsSection }) => setSettingsSection("contexts"))
-          .catch((error: unknown) => {
-            notify.error(`Could not open Settings › Contexts — ${errorMessage(error)}`, {
-              source: "Settings",
-            });
-          });
+        openContextsSection();
       },
       removeToken: (name: string) => {
         delete style()[name];
@@ -399,10 +436,16 @@ function actions(container: HTMLElement): CssVarsActions {
        * predecessor's `ref()` into the DOM could never do.
        */
       setAddName: (groupId: string, value: string) => {
-        pending(container, groupId as TokenGroupId).name = value;
+        const group = groupOf(groupId);
+        if (group) {
+          pending(container, group.id).name = value;
+        }
       },
       setAddValue: (groupId: string, value: string) => {
-        pending(container, groupId as TokenGroupId).value = value;
+        const group = groupOf(groupId);
+        if (group) {
+          pending(container, group.id).value = value;
+        }
       },
       setOverride: (token: string, ctx: string, value: string) => {
         const context = contexts().find((c) => c.name === ctx);
@@ -432,3 +475,47 @@ function actions(container: HTMLElement): CssVarsActions {
 export function renderCssVarsEditor(container: HTMLElement): void {
   refresh(container);
 }
+
+/**
+ * Point the editor at one token: mark its row, scroll it into view and put the keyboard on its
+ * value. What a variable row in the Styles workspace's Outline asks for.
+ *
+ * A name this project does not declare is still recorded (it may be about to be added, or the
+ * Outline may be ahead of a write), and simply marks nothing. The flow only marks the row; bringing
+ * it on screen is the surface's (`revealCssVarsToken`), because only the adapter knows where the
+ * row it draws is.
+ *
+ * @param {HTMLElement} container
+ * @param {string | null} name A custom property, `--accent`, or `null` to mark none
+ * @param {{ reveal?: boolean }} [options] `reveal: false` marks the row without moving the keyboard
+ *   or the scroll position
+ */
+export function focusCssVar(
+  container: HTMLElement,
+  name: string | null,
+  options: { reveal?: boolean } = {},
+): void {
+  form(container).current = name;
+  refresh(container);
+  if (name === null || options.reveal === false) {
+    return;
+  }
+  revealCssVarsToken(container, name);
+}
+
+/**
+ * Point the editor at one group: bring its heading on screen, and with `add` put the keyboard on
+ * its Add row, the editor's own way of adding a variable. What a group heading and "Add variable"
+ * in the Styles workspace's Styles panel ask for.
+ *
+ * @param {HTMLElement} container
+ * @param {TokenGroupId} group
+ * @param {{ add?: boolean }} [options] `add: true` focuses the Add row's name field
+ */
+export function focusCssVarGroup(
+  container: HTMLElement,
+  group: TokenGroupId,
+  options: { add?: boolean } = {},
+): void {
+  revealCssVarsGroup(container, group, options.add === true);
+}

package/src/settings/defs-editor.ts

@@ -40,10 +40,12 @@
  * @docs studio/projects/settings
  */
 
+import { isBoolean, isJsonObject, isString } from "@jxsuite/schema/guards";
 import { projectState } from "../store";
 import { commitProjectConfig } from "../tabs/project-config";
 import { camelToLabel } from "../utils/studio-utils";
 import {
+  BLANK_FIELD,
   FIELD_TYPES,
   FORMAT_OPTIONS,
   detectFieldFormat,
@@ -52,39 +54,30 @@ import {
 } from "./schema-field-ui";
 import { mountDefsSurface } from "../surfaces/settings-defs";
 
-import type { SchemaProperty } from "./schema-field-ui";
+import type { NestedFieldDraft, SchemaProperty } from "./schema-field-ui";
 import type {
   DefsActions,
-  DefsChoice,
   DefsFieldView,
   DefsSurfaceHandle,
   DefsView,
   NestedFieldView,
 } from "../surfaces/settings-defs";
-import type { ContentTypeSchema, ContentTypeSchemaField } from "@jxsuite/schema/types";
+import type { ContentTypeSchema } from "@jxsuite/schema/types";
+import type { SurfaceOption } from "../ui/surface";
 
 // ─── The pickers ──────────────────────────────────────────────────────────────
 
 /** The field types, as picker rows. One array, made once: an equal write re-runs no binding. */
-const TYPE_ROWS: DefsChoice[] = FIELD_TYPES.map((type) => ({ label: type, value: type }));
+const TYPE_ROWS: SurfaceOption[] = FIELD_TYPES.map((type) => ({ label: type, value: type }));
 
 /** The formats, with the empty one named: a blank row says nothing about what choosing it does. */
-const FORMAT_ROWS: DefsChoice[] = FORMAT_OPTIONS.map((format) => ({
+const FORMAT_ROWS: SurfaceOption[] = FORMAT_OPTIONS.map((format) => ({
   label: format || "(none)",
   value: format,
 }));
 
-/** What a new field starts as. */
-const BLANK_FIELD = { format: "", name: "", required: false, type: "string" };
-
 // ─── Per-container state ──────────────────────────────────────────────────────
 
-/** One object field's unsubmitted nested field. */
-interface Draft {
-  name: string;
-  type: string;
-}
-
 /**
  * What the reader is part-way through, per rendered container.
  *
@@ -100,7 +93,7 @@ interface DefsUi {
   addOpen: boolean;
   add: { format: string; name: string; required: boolean; type: string };
   /** Each object field's nested add row, by the field's name on disk. */
-  drafts: Map<string, Draft>;
+  drafts: Map<string, NestedFieldDraft>;
   /**
    * The ONE control whose value has parted from what is on disk, and what it holds.
    *
@@ -166,9 +159,19 @@ function hush(container: HTMLElement): void {
   uiFor(container).echo = null;
 }
 
-/** What a control shows: what it was last told it holds, or what is on disk. */
-function shown<T extends string | boolean>(ui: DefsUi, id: string, disk: T): T {
-  return ui.echo?.id === id ? (ui.echo.value as T) : disk;
+/**
+ * What a text control shows: what it was last told it holds, or what is on disk.
+ *
+ * The echo's value is a string whenever its id is a {@link nameId}, because only the rename setters
+ * echo under one; the check states that rather than assuming it.
+ */
+function shownText(ui: DefsUi, id: string, disk: string): string {
+  return ui.echo?.id === id && isString(ui.echo.value) ? ui.echo.value : disk;
+}
+
+/** What a checkbox shows: what it was last told it holds, or what is on disk. */
+function shownFlag(ui: DefsUi, id: string, disk: boolean): boolean {
+  return ui.echo?.id === id && isBoolean(ui.echo.value) ? ui.echo.value : disk;
 }
 
 // ─── Persistence ──────────────────────────────────────────────────────────────
@@ -200,6 +203,9 @@ function persist(): void {
  * outlive a projection, which makes reading through to the store the thing that keeps them honest.
  */
 function currentDefs(): Record<string, ContentTypeSchema> | undefined {
+  /* SAFETY: project `$defs` holds JSON Schema type definitions (project-schema.json, "Global type
+     definitions") and this editor is their writer; ContentTypeSchema is that schema object's view,
+     every member optional, and each read below falls back (`?? {}`, `?? []`) when one is absent. */
   return projectState?.projectConfig?.$defs as Record<string, ContentTypeSchema> | undefined;
 }
 
@@ -213,19 +219,16 @@ function selectedDef(ui: DefsUi): ContentTypeSchema | undefined {
  * resolves through `#/$context/content`, read here without a schema-form context to go through.
  */
 function contentTypeNames(): string[] {
-  const content = (projectState?.projectConfig as Record<string, unknown> | null | undefined)
-    ?.content;
-  return content && typeof content === "object" && !Array.isArray(content)
-    ? Object.keys(content)
-    : [];
+  const content = projectState?.projectConfig?.content;
+  return isJsonObject(content) ? Object.keys(content) : [];
 }
 
 /** The last target list, so an unchanged one is the same array and re-runs no binding. */
-let targetRows: DefsChoice[] = [];
+let targetRows: SurfaceOption[] = [];
 let targetNames = " ";
 
 /** The reference targets, as picker rows. */
-function targets(): DefsChoice[] {
+function targets(): SurfaceOption[] {
   const names = contentTypeNames();
   const id = names.join(" ");
   if (id !== targetNames) {
@@ -256,9 +259,9 @@ function nestedView(
     format: detectFieldFormat(schema),
     hasFormat: takesFormat(type),
     key,
-    name: shown(ui, nameId(id), key),
+    name: shownText(ui, nameId(id), key),
     parent,
-    required: shown(ui, requiredId(id), required),
+    required: shownFlag(ui, requiredId(id), required),
     type,
   };
 }
@@ -290,9 +293,9 @@ function fieldView(
     hasFormat: takesFormat(type),
     key,
     label: camelToLabel(key),
-    name: shown(ui, nameId(key), key),
+    name: shownText(ui, nameId(key), key),
     refTarget: schema.$ref ? schema.$ref.replace(/^#\/[^/]+\//, "") : "",
-    required: shown(ui, requiredId(key), required),
+    required: shownFlag(ui, requiredId(key), required),
     type,
   };
 }
@@ -312,15 +315,15 @@ function project(container: HTMLElement): DefsView {
     addRequired: ui.add.required,
     addState: ui.addOpen && def ? "open" : "closed",
     addType: ui.add.type,
+    defs: Object.keys(defs).map((name) => ({ name, selected: name === ui.selected })),
     editorState: def ? "editing" : "empty",
     fields: Object.entries(properties).map(([key, schema]) =>
-      fieldView(ui, key, schema as SchemaProperty, required.includes(key), rows.length > 0),
+      fieldView(ui, key, schema, required.includes(key), rows.length > 0),
     ),
     formatOptions: FORMAT_ROWS,
     newName: ui.newName,
     newState: ui.newOpen ? "open" : "closed",
     selected: def && ui.selected !== null ? ui.selected : "",
-    shapes: Object.keys(defs).map((name) => ({ name, selected: name === ui.selected })),
     targets: rows,
     typeOptions: TYPE_ROWS,
   };
@@ -338,10 +341,10 @@ function actionsFor(container: HTMLElement): DefsActions {
 
   /** The parent object a nested edit is about, or `undefined` when it has gone underneath. */
   const parentOf = (parent: string): SchemaProperty | undefined =>
-    selectedDef(ui)?.properties?.[parent] as SchemaProperty | undefined;
+    selectedDef(ui)?.properties?.[parent];
 
   /** One object field's add-row draft, made on first use. */
-  const draftOf = (parent: string): Draft => {
+  const draftOf = (parent: string): NestedFieldDraft => {
     let draft = ui.drafts.get(parent);
     if (!draft) {
       draft = { name: "", type: "string" };
@@ -513,7 +516,7 @@ function actionsFor(container: HTMLElement): DefsActions {
       }
       done();
     },
-    removeShape() {
+    removeSelected() {
       const defs = currentDefs();
       if (ui.selected === null || !defs?.[ui.selected]) {
         return;
@@ -613,7 +616,7 @@ function actionsFor(container: HTMLElement): DefsActions {
       }
       /* The pointer form is `#/content/<type>` — the same one `ui/form-controls.ts` writes, so a
          reference authored here and one authored in the content-types builder are the same value. */
-      def.properties[key] = { $ref: `#/content/${value}` } as ContentTypeSchemaField;
+      def.properties[key] = { $ref: `#/content/${value}` };
       done();
     },
     setType(key, value) {

package/src/settings/developer-panels.ts

@@ -0,0 +1,43 @@
+/**
+ * The **Show developer panels** preference (`specs/studio.md` §5.1, §15).
+ *
+ * Off by default. A site author works in pages, templates, components and media, and the Site panel
+ * lists those by what they are; the Files tree and the Packages list are where a developer looks,
+ * so they are off the Design rail until the author asks for them. With the switch off both panels
+ * are still reachable by `view.setActivity` and the palette: the switch hides two rail buttons, not
+ * two capabilities.
+ *
+ * The value roams like the theme does (`SETTINGS.developerPanels`, scope `user`), and it is read
+ * through a REACTIVE mirror rather than straight from the kernel: the rail derives its groups
+ * inside an effect, and a kernel read is not tracked, so a flip in Preferences (or in another
+ * window) would otherwise leave the rail drawing the old answer until something unrelated repainted
+ * it.
+ *
+ * @docs studio/interface
+ */
+
+import { reactive } from "../reactivity";
+import { SETTINGS } from "../services/settings/definitions";
+import { onSettingsChanged, readStoredSetting, setSetting } from "../services/settings/kernel";
+
+/** The stored spelling of "on". Anything else, including unset, is off. */
+const ON = "true";
+
+const _state = reactive({ on: readStoredSetting(SETTINGS.developerPanels) === ON });
+
+onSettingsChanged((keys) => {
+  if (keys.includes(SETTINGS.developerPanels.key)) {
+    _state.on = readStoredSetting(SETTINGS.developerPanels) === ON;
+  }
+});
+
+/** Whether the developer panels (Files, Packages) are on the rail. Tracked when read in an effect. */
+export function developerPanelsShown(): boolean {
+  return _state.on;
+}
+
+/** Put the developer panels on the rail, or take them off. Persisted and roaming. */
+export function setDeveloperPanelsShown(show: boolean): void {
+  _state.on = show;
+  setSetting(SETTINGS.developerPanels, show ? ON : "");
+}

package/src/settings/extension-rows.ts

@@ -42,7 +42,7 @@ export interface ExtensionRow {
 
 /** The live project configuration, or an empty one before a project is open. */
 export function projectConfig(): ProjectConfig {
-  return (projectState?.projectConfig ?? {}) as ProjectConfig;
+  return projectState?.projectConfig ?? {};
 }
 
 /** The specifiers `project.json` currently enables. */
@@ -71,7 +71,7 @@ export function buildRows(packages: PackageInfo[] | null = null): ExtensionRow[]
     const here = entry.installed ?? installed.has(entry.name);
     const bundled = entry.bundled ?? false;
     const info = resolved.get(entry.name);
-    rows.push({
+    const row: ExtensionRow = {
       broken: enabled.has(specifier) && !here && !bundled,
       bundled,
       enabled: enabled.has(specifier),
@@ -83,9 +83,14 @@ export function buildRows(packages: PackageInfo[] | null = null): ExtensionRow[]
         : entry.sections.map((s) => s.key),
       specifier,
       title: entry.title ?? entry.name,
-      ...(entry.description === undefined ? {} : { description: entry.description }),
-      ...(entry.problem === undefined ? {} : { unavailable: entry.problem }),
-    });
+    };
+    if (entry.description !== undefined) {
+      row.description = entry.description;
+    }
+    if (entry.problem !== undefined) {
+      row.unavailable = entry.problem;
+    }
+    rows.push(row);
   }
 
   // Anything project.json names that the backend did not describe. It can still be turned OFF,
@@ -95,7 +100,7 @@ export function buildRows(packages: PackageInfo[] | null = null): ExtensionRow[]
       continue;
     }
     const info = resolved.get(specifier);
-    rows.push({
+    const row: ExtensionRow = {
       broken: !installed.has(specifier) && info === undefined,
       bundled: false,
       enabled: true,
@@ -105,8 +110,11 @@ export function buildRows(packages: PackageInfo[] | null = null): ExtensionRow[]
       sections: info ? info.contributions.map((c) => c.project.key) : [],
       specifier,
       title: info?.title ?? specifier,
-      ...(info?.description === undefined ? {} : { description: info.description }),
-    });
+    };
+    if (info?.description !== undefined) {
+      row.description = info.description;
+    }
+    rows.push(row);
   }
 
   return rows;