@jxsuite/studio 2.0.1 → 2.1.0

package/src/settings/contexts-section.ts

@@ -0,0 +1,427 @@
+/// <reference lib="dom" />
+/**
+ * Contexts — the ONE place a project's rendering contexts are defined (plan §4.2, §2 principle 5).
+ *
+ * A rendering context is anything the document can be resolved _under_: a size breakpoint, a colour
+ * scheme, a feature query. All three are the same thing on disk — one entry in `project.json`'s
+ * `$media` map — and until this section existed they were **defined in four places**, none of which
+ * said "context" and only one of which said "breakpoint":
+ *
+ * 1. The New Project wizard's four breakpoint presets, described by media-query direction;
+ * 2. Settings › General's "Breakpoints" field;
+ * 3. Properties › Media, which renders **only when the document root is selected** — so adding a
+ *    breakpoint cost you your element selection, the Style tab's scope, and your place;
+ * 4. The CSS Variables editor's "Enable dark scheme" button, which appended `'--dark':
+ *    '(prefers-color-scheme: dark)'` to `$media` **without ever using the word breakpoint**, so the
+ *    one control that created a colour scheme was filed under variables.
+ *
+ * All four are gone. §2 principle 5 is why: **definition and selection are different levels.** The
+ * pane context bar's Rendering-context control _selects_ among these; its popover's footer is
+ * "Manage contexts…", which opens this section. Nothing here selects, and nothing there defines.
+ *
+ * **This section writes the project, not the document.** Per-document `$media` overlays still merge
+ * at render time (`site-context.ts`'s `getEffectiveMedia`) and the on-disk format is unchanged —
+ * what moved is the authoring surface, from a panel that required a selection to a settings section
+ * that requires only a project.
+ *
+ * Failures are surfaced, not swallowed: every write runs through {@link persistMedia}, which
+ * schema-validates the candidate `project.json` with `jx-validate` first (the human editing this
+ * file used to get **no validation at all** — that was wired to the AI's `write_project_config`
+ * alone), parks any rejection under the control that caused it, and re-renders. §7.1's third tier:
+ * a bad value belongs at its control, not in a toast that expires.
+ *
+ * @docs studio/projects/pages-layouts-components
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import { errorMessage } from "@jxsuite/schema/parse";
+import { projectState } from "../store";
+import { updateSiteConfig } from "../site-context";
+import { validateProjectConfig } from "../services/jx-validate";
+import { isSchemeQuery, schemeOfQuery } from "../utils/canvas-media";
+import { mediaDisplayName } from "../panels/shared";
+
+import type { ProjectConfig } from "@jxsuite/schema/types";
+
+/** The `$media` key the base width lives under. Not a query — a number of CSS pixels. */
+const BASE_KEY = "--";
+
+/** What a new size breakpoint starts as. Narrow-first, because `--` is the widest canvas. */
+const NEW_BREAKPOINT_QUERY = "(max-width: 768px)";
+
+/** What a new feature query starts as — a real query, so the row is valid the moment it exists. */
+const NEW_FEATURE_QUERY = "(prefers-reduced-motion: reduce)";
+
+/** The three kinds of context, in the order they are defined and rendered. */
+export type ContextKind = "size" | "scheme" | "feature";
+
+/** One `$media` entry, classified. */
+export interface ContextEntry {
+  key: string;
+  query: string;
+  kind: ContextKind;
+}
+
+/**
+ * Which kind of context an entry is.
+ *
+ * The classification is the same one the canvas makes (`utils/canvas-media.ts`) so a row defined
+ * here lands in the group the pane context bar will show it in — a size breakpoint gets a canvas
+ * width, a scheme query drives the Auto/Light/Dark segment, and everything else is a plain toggle.
+ * Deriving it from the query rather than storing it is what keeps the on-disk format unchanged.
+ *
+ * @param {string} query
+ * @returns {ContextKind}
+ */
+export function contextKindOf(query: string): ContextKind {
+  if (isSchemeQuery(query)) {
+    return "scheme";
+  }
+  return /(?:min|max)-width:/.test(query) ? "size" : "feature";
+}
+
+/**
+ * Split a `$media` map into the base width and the three context groups.
+ *
+ * @param {Record<string, string> | undefined} media
+ * @returns {{ base: string; entries: ContextEntry[] }}
+ */
+export function splitContexts(media?: Record<string, string> | undefined): {
+  base: string;
+  entries: ContextEntry[];
+} {
+  const source = media ?? {};
+  const entries: ContextEntry[] = [];
+  for (const [key, raw] of Object.entries(source)) {
+    if (key === BASE_KEY) {
+      continue;
+    }
+    const query = String(raw);
+    entries.push({ key, kind: contextKindOf(query), query });
+  }
+  return { base: String(source[BASE_KEY] ?? ""), entries };
+}
+
+/**
+ * The `$media` key a typed name becomes: `Wide screen` → `--wide-screen`.
+ *
+ * Typing the leading dashes is allowed but never required — the dashes are a storage detail of the
+ * CSS custom-property namespace `$media` shares, and §8.4 says a definition surface may not make
+ * the user spell one.
+ *
+ * @param {string} name
+ * @returns {string}
+ */
+export function contextKeyOf(name: string): string {
+  const slug = name
+    .trim()
+    .replace(/^-+/, "")
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9]+/g, "-")
+    .replaceAll(/^-+|-+$/g, "");
+  return slug ? `--${slug}` : "";
+}
+
+// ─── Per-container error state ────────────────────────────────────────────────
+
+/**
+ * Where an error belongs. A `$media` key addresses the row it came from; `"base"` is the base-width
+ * field and `"section"` is a whole-file write failure with no single guilty control.
+ */
+type ErrorTarget = string;
+
+/**
+ * The last failure, per rendered container.
+ *
+ * Keyed by container so two mounted copies (and two tests) never share a message — the same reason
+ * `general-settings.ts` does it. One at a time is deliberate: settings persist on change, so there
+ * is exactly one write in flight and exactly one thing that just went wrong.
+ */
+const errors = new WeakMap<HTMLElement, { target: ErrorTarget; message: string }>();
+
+/** Read the current failure for a container — exported for tests and for re-render helpers. */
+export function contextsError(container: HTMLElement): { target: string; message: string } | null {
+  return errors.get(container) ?? null;
+}
+
+// ─── Render ───────────────────────────────────────────────────────────────────
+
+/**
+ * Render Project Settings › Contexts into `container`.
+ *
+ * @param {HTMLElement} container
+ */
+export function renderContextsSection(container: HTMLElement): void {
+  const config = (projectState?.projectConfig || {}) as ProjectConfig;
+  const media = (config.$media || {}) as Record<string, string>;
+  const shown = errors.get(container);
+  const { base, entries } = splitContexts(media);
+
+  /** Park a failure under one control without writing anything. */
+  const reject = (target: ErrorTarget, message: string) => {
+    errors.set(container, { message, target });
+    renderContextsSection(container);
+  };
+
+  /**
+   * Write a whole `$media` map, validating it first and surfacing whatever refuses it.
+   *
+   * Both failure modes are real and both used to be invisible here: the schema can refuse the
+   * shape, and the disk can refuse the write. The predecessor surfaces (`Properties › Media` and
+   * the CSS-variables "Enable dark scheme") did `void updateSiteConfig(...)` and dropped the
+   * rejection, so a failed write read as the field snapping back for no reason.
+   */
+  const persistMedia = async (next: Record<string, string>, target: ErrorTarget) => {
+    const candidate = { ...config, $media: next } as unknown;
+    let schemaErrors: string[] = [];
+    try {
+      schemaErrors = await validateProjectConfig(candidate);
+    } catch (error) {
+      /* A validator that cannot compile must not block the edit — but it must not be silent
+         either, so the message rides the same inline slot the schema errors would have used. */
+      reject(target, `Could not validate project.json — ${errorMessage(error)}`);
+      return;
+    }
+    if (schemaErrors.length > 0) {
+      reject(target, schemaErrors.join("; "));
+      return;
+    }
+    try {
+      await updateSiteConfig({ $media: next });
+      errors.delete(container);
+    } catch (error) {
+      errors.set(container, {
+        message: `Could not save project.json — ${errorMessage(error)}`,
+        target,
+      });
+    }
+    renderContextsSection(container);
+  };
+
+  /** The error line for one control, when that is where the current failure belongs. */
+  const errorFor = (target: ErrorTarget) =>
+    shown?.target === target
+      ? html`<p class="settings-field-error" role="alert">${shown.message}</p>`
+      : nothing;
+
+  // ─── Base width ────────────────────────────────────────────────────────────
+
+  const onBaseChange = (e: Event) => {
+    const value = (e.target as HTMLInputElement).value.trim();
+    if (value && !/^\d+px$/.test(value)) {
+      reject("base", "Enter a width in pixels, like 1280px.");
+      return;
+    }
+    const next = { ...media };
+    if (value) {
+      next[BASE_KEY] = value;
+    } else {
+      delete next[BASE_KEY];
+    }
+    void persistMedia(next, "base");
+  };
+
+  // ─── Row editing ───────────────────────────────────────────────────────────
+
+  const onRename = (oldKey: string) => (e: Event) => {
+    const newKey = contextKeyOf((e.target as HTMLInputElement).value);
+    if (!newKey) {
+      reject(oldKey, "A context needs a name.");
+      return;
+    }
+    if (newKey === oldKey) {
+      return;
+    }
+    if (newKey in media) {
+      reject(oldKey, `"${mediaDisplayName(newKey)}" is already defined.`);
+      return;
+    }
+    /* Rebuild in place so renaming never reorders the list — the order is the order the pane
+       context bar offers them in, and a rename is not a reordering. */
+    const next: Record<string, string> = {};
+    for (const [key, value] of Object.entries(media)) {
+      next[key === oldKey ? newKey : key] = value;
+    }
+    void persistMedia(next, newKey);
+  };
+
+  const onQueryChange = (key: string) => (e: Event) => {
+    const query = (e.target as HTMLInputElement).value.trim();
+    if (!query) {
+      reject(key, "A context needs a media query, like (max-width: 768px).");
+      return;
+    }
+    void persistMedia({ ...media, [key]: query }, key);
+  };
+
+  const onRemove = (key: string) => () => {
+    const next = { ...media };
+    delete next[key];
+    void persistMedia(next, "section");
+  };
+
+  /** Add an entry under the first free `--<stem>` / `--<stem>-2` … name. */
+  const add = (stem: string, query: string) => () => {
+    let key = `--${stem}`;
+    let n = 2;
+    while (key in media) {
+      key = `--${stem}-${n}`;
+      n += 1;
+    }
+    void persistMedia({ ...media, [key]: query }, key);
+  };
+
+  /** The scheme picker writes the canonical query, so a scheme is never mistyped into a feature. */
+  const onSchemeChange = (key: string) => (e: Event) => {
+    const scheme = (e.target as HTMLInputElement).value;
+    void persistMedia({ ...media, [key]: `(prefers-color-scheme: ${scheme})` }, key);
+  };
+
+  // ─── Group templates ───────────────────────────────────────────────────────
+
+  const removeButton = (key: string) => html`
+    <sp-action-button
+      size="s"
+      quiet
+      data-remove=${key}
+      title="Remove ${mediaDisplayName(key)}"
+      @click=${onRemove(key)}
+    >
+      ×
+    </sp-action-button>
+  `;
+
+  const nameField = (key: string) => html`
+    <sp-textfield
+      size="s"
+      class="settings-media-name"
+      .value=${live(key.replace(/^--/, ""))}
+      placeholder="name"
+      ?invalid=${shown?.target === key}
+      @change=${onRename(key)}
+    ></sp-textfield>
+  `;
+
+  const queryRow = (entry: ContextEntry) => html`
+    <div class="settings-media-row" data-context=${entry.key}>
+      ${nameField(entry.key)}
+      <sp-textfield
+        size="s"
+        class="settings-media-value"
+        .value=${live(entry.query)}
+        placeholder=${NEW_BREAKPOINT_QUERY}
+        ?invalid=${shown?.target === entry.key}
+        @change=${onQueryChange(entry.key)}
+      ></sp-textfield>
+      ${removeButton(entry.key)}
+    </div>
+    ${errorFor(entry.key)}
+  `;
+
+  const schemeRow = (entry: ContextEntry) => html`
+    <div class="settings-media-row" data-context=${entry.key}>
+      ${nameField(entry.key)}
+      <sp-picker
+        size="s"
+        class="settings-media-value"
+        label="Scheme"
+        .value=${schemeOfQuery(entry.query) ?? "dark"}
+        @change=${onSchemeChange(entry.key)}
+      >
+        <sp-menu-item value="light">Light</sp-menu-item>
+        <sp-menu-item value="dark">Dark</sp-menu-item>
+      </sp-picker>
+      ${removeButton(entry.key)}
+    </div>
+    ${errorFor(entry.key)}
+  `;
+
+  const group = (
+    kind: ContextKind,
+    label: string,
+    desc: string,
+    row: (entry: ContextEntry) => unknown,
+    addLabel: string,
+    onAdd: () => void,
+    empty: string,
+  ) => {
+    const rows = entries.filter((entry) => entry.kind === kind);
+    return html`
+      <div class="settings-field" data-context-group=${kind}>
+        <label class="settings-field-label">${label}</label>
+        <p class="settings-field-desc">${desc}</p>
+        <div class="settings-media-list">
+          ${
+            rows.length === 0
+              ? html`<p class="settings-field-desc">${empty}</p>`
+              : rows.map((entry) => row(entry))
+          }
+        </div>
+        <sp-action-button size="s" data-add=${kind} @click=${onAdd}>${addLabel}</sp-action-button>
+      </div>
+    `;
+  };
+
+  const tpl = html`
+    <div class="settings-section">
+      <h3 class="settings-section-title">Contexts</h3>
+      <p class="settings-field-desc">
+        The conditions this project's pages are rendered under. Define them once here; choose
+        between them on the pane's context control while you edit.
+      </p>
+      ${errorFor("section")}
+
+      <div class="settings-field">
+        <label class="settings-field-label">Base width</label>
+        <p class="settings-field-desc">
+          How wide the canvas is when no other context applies. Styles written here apply
+          everywhere.
+        </p>
+        <div class="settings-media-row">
+          <span class="settings-media-name-fixed">Base</span>
+          <sp-textfield
+            size="s"
+            class="settings-media-value"
+            data-context="base"
+            placeholder="1280px"
+            .value=${live(base)}
+            ?invalid=${shown?.target === "base"}
+            @change=${onBaseChange}
+          ></sp-textfield>
+        </div>
+        ${errorFor("base")}
+      </div>
+
+      ${group(
+        "size",
+        "Size breakpoints",
+        "Screen widths that get their own canvas and their own style values.",
+        queryRow,
+        "+ Add breakpoint",
+        add("breakpoint", NEW_BREAKPOINT_QUERY),
+        "No breakpoints yet — every width uses the base styles.",
+      )}
+      ${group(
+        "scheme",
+        "Colour schemes",
+        "Light and dark renderings. Defining one turns on the Auto / Light / Dark control.",
+        schemeRow,
+        "+ Add colour scheme",
+        add("dark", "(prefers-color-scheme: dark)"),
+        "No colour schemes yet — the project renders one way.",
+      )}
+      ${group(
+        "feature",
+        "Feature queries",
+        "Anything else a media query can ask: reduced motion, print, hover, orientation.",
+        queryRow,
+        "+ Add feature query",
+        add("feature", NEW_FEATURE_QUERY),
+        "No feature queries yet.",
+      )}
+    </div>
+  `;
+
+  litRender(tpl, container);
+}

package/src/settings/contributed-section.ts

@@ -9,11 +9,17 @@
  */
 
 import { html, nothing, render as litRender } from "lit-html";
+import { errorMessage } from "@jxsuite/schema/parse";
 import { getPlatform } from "../platform";
+import { commitProjectConfig } from "../tabs/project-config";
 import { projectState } from "../store";
 import { renderForm } from "../ui/schema-form";
 import { resolveContextPointer } from "../services/context-resolver";
 import { deriveSecretEnvName } from "../services/data-service";
+import { validateProjectConfig } from "../services/jx-validate";
+import { notify } from "../services/notify";
+import { paneRegion } from "../ui/regions";
+import { paneOfContainer } from "../canvas/canvas-surface";
 
 import type { TemplateResult } from "lit-html";
 import type { JsonSchema, SchemaFormContext } from "../ui/schema-form";
@@ -77,12 +83,134 @@ export function resetContributedSectionState(): void {
   newEntryNames.clear();
 }
 
+/**
+ * Select an entry of a map-layout section by key — the addressable form of clicking an entry row.
+ *
+ * Five screenshot steps used to reach these rows by typing an empty string into a hand-stamped
+ * region id, carrying `unstable: { reason: "\"settings.selectEntry\" has no command record", until:
+ * "P6.2" }`. This is P6.2 and the record is `settings.open {section, entry}`: an entry is a KEY in
+ * the section's own map, so naming it is naming state rather than reproducing a gesture.
+ *
+ * @param {string} sectionKey
+ * @param {string} entryKey
+ * @returns {string[] | null} `null` once selected; the section's actual entry keys when it has no
+ *   such entry, so the caller's refusal can name both sides.
+ */
+export function selectContributedEntry(sectionKey: string, entryKey: string): string[] | null {
+  const section = (projectState?.projectConfig as Record<string, unknown> | null | undefined)?.[
+    sectionKey
+  ];
+  const entries =
+    section && typeof section === "object" && !Array.isArray(section)
+      ? (section as Record<string, unknown>)
+      : {};
+  if (!Object.hasOwn(entries, entryKey)) {
+    return Object.keys(entries);
+  }
+  selectedEntries.set(sectionKey, entryKey);
+  return null;
+}
+
+// ─── Validation (§7.1 inline tier, §7.2 Problems) ─────────────────────────────
+
+/**
+ * The last validator run's messages, keyed by the JSON-pointer base they were rendered under.
+ *
+ * `jx-validate` validates the WHOLE `project.json` against the project's generated entry document,
+ * so its output has to be routed back to individual controls. Until now it was wired to exactly one
+ * caller — the AI's `write_project_config` — which meant the model's edits to this file were
+ * schema-checked and a human's edits through this very form were not.
+ */
+const diagnostics = new Map<string, Record<string, string>>();
+
+/** Drop every cached diagnostic (test hook, and the "project closed" path). */
+export function resetContributedDiagnostics(): void {
+  diagnostics.clear();
+}
+
+/**
+ * Route `jx-validate` messages ("/search/index: must be string") to the field they are about.
+ *
+ * Only the messages one level under `base` become field errors: `/search/index` belongs to the
+ * `index` control, and `/search/index/0/kind` belongs to it too — the deepest control that exists
+ * on this form is the one that can be corrected. A message ABOUT the base itself has no field to
+ * live at and is returned separately, for the section line.
+ *
+ * @param {string} base - JSON pointer of the record the form is editing, e.g. `/search`
+ * @param {string[]} messages
+ * @returns {{ fields: Record<string, string>; section: string[] }}
+ */
+export function routeDiagnostics(
+  base: string,
+  messages: string[],
+): { fields: Record<string, string>; section: string[] } {
+  const fields: Record<string, string> = {};
+  const section: string[] = [];
+  for (const message of messages) {
+    const at = message.indexOf(": ");
+    const pointer = at === -1 ? "" : message.slice(0, at);
+    const text = at === -1 ? message : message.slice(at + 2);
+    if (pointer === base) {
+      section.push(text);
+      continue;
+    }
+    if (!pointer.startsWith(`${base}/`)) {
+      continue;
+    }
+    const [prop] = pointer.slice(base.length + 1).split("/");
+    if (prop && fields[prop] === undefined) {
+      fields[prop] = text;
+    }
+  }
+  return { fields, section };
+}
+
 // ─── Persistence ──────────────────────────────────────────────────────────────
 
-async function saveProjectConfig() {
-  const platform = getPlatform();
+/**
+ * Commit `project.json`, then say what is wrong with it.
+ *
+ * The write itself now belongs to `tabs/project-config.ts` — one serialisation, one error path, and
+ * a transaction the author can undo. This module used to own a second writer, at
+ * `JSON.stringify(config, null, "\t")`, which re-indented the whole file on any edit; and before
+ * that it was `void saveProjectConfig()` at five call sites with no validation at all. §7.2 files a
+ * failed config write as a Problem, because it must be fixed and it is about a named file; the
+ * chokepoint files it, so a failure here only has to stop.
+ *
+ * **The write comes first, and the order is the honest one.** This form mutates
+ * `projectState.projectConfig` in place before calling here, so the value is already live in the
+ * editor and the canvas; a validator run in front of the write could not have prevented anything,
+ * it would only have delayed persisting what the user can already see. This surface REPORTS. The
+ * one that gates is `contexts-section.ts`, which builds a candidate map and validates it before
+ * anything is applied.
+ *
+ * @param {string} base - JSON pointer of the record being edited, for routing field errors
+ * @param {() => void} rerender
+ */
+async function saveProjectConfig(base: string, rerender: () => void) {
   const config = (projectState as { projectConfig: ProjectConfig }).projectConfig;
-  await platform.writeFile("project.json", JSON.stringify(config, null, "\t"));
+
+  const commit = await commitProjectConfig();
+  if (!commit.ok) {
+    return;
+  }
+
+  let messages: string[] = [];
+  try {
+    messages = await validateProjectConfig(config);
+  } catch (error) {
+    /* A validator that will not compile must not be silent about it — but it is not the edit's
+       fault, so it is a problem of its own rather than an error parked on the user's field. */
+    notify.warn(`Could not validate project.json — ${errorMessage(error)}`, {
+      key: "settings:validator",
+      path: "project.json",
+      source: "Settings",
+      tier: "problem",
+    });
+    return;
+  }
+  diagnostics.set(base, routeDiagnostics(base, messages).fields);
+  rerender();
 }
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -181,8 +309,13 @@ function sectionValue(key: string): Record<string, unknown> | null {
 
 // ─── Render ───────────────────────────────────────────────────────────────────
 
+/* There is no `paneOfContainer` here. It moved to `canvas/canvas-surface.ts`, beside the other
+   "which pane is this about" answers, because it is not a settings idea: any stage content handed
+   only a host needs it, and `settings/general-settings.ts` and `settings/project-sections.ts` are
+   two more that do — both write a canvas mode, and both used to write the FOCUSED pane's. */
+
 /**
- * Render a contributed settings section into a settings-modal content container.
+ * Render a contributed settings section into the settings document's content area.
  *
  * @param {HTMLElement} container
  * @param {SettingsContribution} contribution
@@ -199,7 +332,7 @@ export function renderContributedSection(
 
   const body =
     layout === "map"
-      ? renderMapLayout(contribution, opts, rerender)
+      ? renderMapLayout(contribution, opts, rerender, paneOfContainer(container))
       : renderFormLayout(contribution, opts, rerender);
 
   const selected = layout === "map" ? (selectedEntries.get(contribution.key) ?? null) : null;
@@ -225,11 +358,13 @@ function renderFormLayout(
 ): TemplateResult {
   const value = sectionValue(contribution.key) ?? {};
   const ui = contribution.settings.entry?.ui;
+  const base = `/${contribution.key}`;
 
   return html`
     <div class="settings-form-panel">
       ${renderForm(contribution.entrySchema, value, {
         context: buildContext(contribution.key, opts, null),
+        errors: diagnostics.get(base) ?? {},
         onChange: (patch) => {
           const target = sectionValue(contribution.key);
           if (!target) {
@@ -237,7 +372,7 @@ function renderFormLayout(
           }
           applyPatch(target, patch);
           rerender();
-          void saveProjectConfig();
+          void saveProjectConfig(base, rerender);
         },
         rerender,
         ...(ui !== undefined && { ui }),
@@ -251,6 +386,7 @@ function renderMapLayout(
   contribution: SettingsContribution,
   opts: ContributedSectionOptions,
   rerender: () => void,
+  paneId: string,
 ): TemplateResult {
   const { key: sectionKey } = contribution;
   const entries = sectionValue(sectionKey) ?? {};
@@ -269,7 +405,7 @@ function renderMapLayout(
     newEntryOpen.delete(sectionKey);
     newEntryNames.delete(sectionKey);
     rerender();
-    void saveProjectConfig();
+    void saveProjectConfig(`/${sectionKey}`, rerender);
   };
 
   const handleDelete = () => {
@@ -280,7 +416,7 @@ function renderMapLayout(
     delete target[selected];
     selectedEntries.set(sectionKey, null);
     rerender();
-    void saveProjectConfig();
+    void saveProjectConfig(`/${sectionKey}`, rerender);
   };
 
   const handleRename = (newName: string) => {
@@ -298,7 +434,7 @@ function renderMapLayout(
     Object.assign(target, next);
     selectedEntries.set(sectionKey, slug);
     rerender();
-    void saveProjectConfig();
+    void saveProjectConfig(`/${sectionKey}`, rerender);
   };
 
   // Left column — entry key list
@@ -308,6 +444,7 @@ function renderMapLayout(
         (name) => html`
           <sp-action-button
             size="s"
+            data-jx-region=${paneRegion(paneId, `entry:${name}`)}
             ?selected=${selected === name}
             @click=${() => {
               selectedEntries.set(sectionKey, name);
@@ -363,7 +500,7 @@ function renderMapLayout(
   const editorTpl: TemplateResult =
     selected && selectedEntry && typeof selectedEntry === "object"
       ? html`
-          <div class="settings-editor-panel">
+          <div class="settings-editor-panel" data-jx-region=${paneRegion(paneId, "editor")}>
             <div class="settings-editor-header">
               <sp-textfield
                 size="s"
@@ -392,10 +529,11 @@ function renderMapLayout(
             </div>
             ${renderForm(contribution.entrySchema, selectedEntry as Record<string, unknown>, {
               context: buildContext(sectionKey, opts, selected),
+              errors: diagnostics.get(`/${sectionKey}/${selected}`) ?? {},
               onChange: (patch) => {
                 applyPatch(selectedEntry as Record<string, unknown>, patch);
                 rerender();
-                void saveProjectConfig();
+                void saveProjectConfig(`/${sectionKey}/${selected}`, rerender);
               },
               rerender,
               ...(ui !== undefined && { ui }),