@jxsuite/studio 4.1.0 → 5.1.0

package/src/settings/project-sections.ts

@@ -1,31 +1,43 @@
 /// <reference lib="dom" />
 /**
- * The three Project Settings sections the document adds — Extensions, Deploy and Raw JSON.
+ * The two Project Settings sections the document adds directly — Deploy and Raw JSON.
  *
- * They live together because each is a small, direct view of ONE `project.json` key and none of
- * them owns a dialog, a picker or a schema form: `extensions` (an array of package names),
- * `build.adapter` (one enum), and the file itself.
+ * They live together because each is a small, direct view of ONE `project.json` key and neither
+ * owns a dialog, a picker or a schema form: `build.adapter` (one enum), and the file itself.
  *
- * **Extensions had no UI at all** — plan §9.2's last row — despite `site-context.ts` carrying a
- * dedicated branch to react to the array changing. Adding or removing a package here is therefore
- * the first way to turn an extension on from inside Studio, and the chokepoint's own
- * `refreshExtensionSurfaces()` re-reads the formats and the contributed sections afterwards, so the
- * section list beside this one updates without a reload.
+ * **Extensions used to be the third.** It was a free-text field over the `extensions` array, which
+ * wrote `project.json` and nothing else — so a name that was not installed produced a project that
+ * failed to build. It now needs a catalogue, a package list and an install path, which is more than
+ * "a direct view of one key", and it lives in `./extensions-section.ts`. What stayed behind is the
+ * error plumbing both still share.
  *
  * **Raw JSON does not open a second editor.** It shows what is on disk and hands the author to the
  * Code editor over the SAME tab — one document, three editors (§9.3), so switching to the text and
  * back keeps one undo stack instead of forking two.
  *
+ * **The markup left.** Each section is a Jx document over the kit — `surfaces/settings-deploy.json`
+ * and `surfaces/settings-rawjson.json`, mounted by the adapters beside them — and what is here is
+ * what was always this module's: what an adapter name means, what reaches `project.json`, what a
+ * failed write says, and what "Edit as code" does to the tab. Two documents rather than one,
+ * because they are two sections: the registry contributes each under its own key and only one of
+ * them is ever on screen, so a single document would have to carry a discriminant whose only job
+ * was to hide half of itself. `renderDeploySection` and `renderRawJsonSection` are unchanged as
+ * contracts — the registry hands a container to a `render`, and each of these mounts a document
+ * into it instead of rendering lit.
+ *
  * @docs studio/projects/settings
  */
 
-import { html, render as litRender, nothing } from "lit-html";
 import { errorMessage } from "@jxsuite/schema/parse";
 import { projectState, updateUi } from "../store";
 import { serializeProjectConfig } from "../tabs/project-config";
 import { tabOfContainer } from "../canvas/canvas-surface";
 import { updateSiteConfig } from "../site-context";
+import { mountDeploySurface } from "../surfaces/settings-deploy";
+import { mountRawJsonSurface } from "../surfaces/settings-rawjson";
 
+import type { DeployActions, DeploySurfaceHandle, DeployValues } from "../surfaces/settings-deploy";
+import type { RawJsonSurfaceHandle, RawJsonValues } from "../surfaces/settings-rawjson";
 import type { ProjectConfig } from "@jxsuite/schema/types";
 
 /** The mode the Code editor draws under — `tabs/tab.ts`'s `EDITOR_KIND_BY_MODE` maps it to `code`. */
@@ -40,17 +52,32 @@ const CODE_MODE = "source";
  */
 const errors = new WeakMap<HTMLElement, string>();
 
-/** Drop a parked error and re-render. */
-function clearError(container: HTMLElement): void {
-  errors.delete(container);
+/** The live project configuration, or an empty one before a project is open. */
+function config(): ProjectConfig {
+  return (projectState?.projectConfig ?? {}) as ProjectConfig;
 }
 
-/** The error line for a section, if its last write failed. */
-function errorLine(container: HTMLElement) {
-  const message = errors.get(container);
-  return message === undefined
-    ? nothing
-    : html`<p class="settings-field-error" role="alert">${message}</p>`;
+// ─── Deploy ───────────────────────────────────────────────────────────────────
+
+/** The build adapters `@jxsuite/compiler` ships. One enumeration, shared with New Project. */
+export const BUILD_ADAPTERS: readonly { value: string; label: string }[] = [
+  { label: "Static", value: "static" },
+  { label: "Bun", value: "bun" },
+  { label: "Node", value: "node" },
+  { label: "Cloudflare Workers", value: "cloudflare-workers" },
+  { label: "Cloudflare Pages", value: "cloudflare-pages" },
+];
+
+/** The surface mounted in each Deploy container, so a redraw updates one rather than making another. */
+const deployMounts = new WeakMap<HTMLElement, DeploySurfaceHandle>();
+
+/** What the Deploy section shows, from the file and the parked error as they stand now. */
+function deployValues(container: HTMLElement): DeployValues {
+  return {
+    adapter: config().build?.adapter || "static",
+    adapters: BUILD_ADAPTERS.map((entry) => ({ label: entry.label, value: entry.value })),
+    error: errors.get(container) ?? "",
+  };
 }
 
 /**
@@ -61,200 +88,100 @@ function errorLine(container: HTMLElement) {
  *
  * @param {HTMLElement} container
  * @param {Partial<ProjectConfig>} patch
- * @param {() => void} rerender
  */
-async function persist(
-  container: HTMLElement,
-  patch: Partial<ProjectConfig>,
-  rerender: () => void,
-): Promise<void> {
+async function persist(container: HTMLElement, patch: Partial<ProjectConfig>): Promise<void> {
   try {
     await updateSiteConfig(patch);
-    clearError(container);
+    errors.delete(container);
   } catch (error) {
     errors.set(container, `Could not save project.json — ${errorMessage(error)}`);
   }
-  rerender();
-}
-
-/** The live project configuration, or an empty one before a project is open. */
-function config(): ProjectConfig {
-  return (projectState?.projectConfig ?? {}) as ProjectConfig;
+  renderDeploySection(container);
 }
 
-// ─── Extensions ───────────────────────────────────────────────────────────────
-
-/** Pending package name per container, so typing survives the section re-rendering. */
-const pendingExtension = new WeakMap<HTMLElement, string>();
-
 /**
- * The `extensions` array, as a list you can add to and remove from.
+ * What the reader may do, bound to one container.
  *
- * @param {HTMLElement} container
+ * Memoized per container so the surface is handed the same function every time: actions are read
+ * once, when it mounts, and a fresh one on every refresh would be a scope write that says nothing.
  */
-export function renderExtensionsSection(container: HTMLElement): void {
-  const rerender = () => renderExtensionsSection(container);
-  const extensions = config().extensions ?? [];
-  const pending = pendingExtension.get(container) ?? "";
-
-  /* Both handlers re-read rather than closing over the render's values. Typing updates the pending
-     name WITHOUT a re-render (re-rendering per keystroke would fight the field's own value), so a
-     closed-over `pending` would always be whatever it was when the section was last drawn — which
-     is "" on the first add. */
-  const add = () => {
-    const name = (pendingExtension.get(container) ?? "").trim();
-    const current = config().extensions ?? [];
-    if (!name || current.includes(name)) {
-      return;
-    }
-    pendingExtension.delete(container);
-    void persist(container, { extensions: [...current, name] }, rerender);
-  };
-
-  const remove = (name: string) => {
-    const current = config().extensions ?? [];
-    void persist(container, { extensions: current.filter((e) => e !== name) }, rerender);
-  };
-
-  const tpl = html`
-    <div class="settings-section">
-      <h3 class="settings-section-title">Extensions</h3>
-      <p class="settings-field-desc">
-        Packages this project loads. An extension can contribute formats, elements, data connectors
-        — and settings sections of its own, which appear in the list beside this one.
-      </p>
-      ${errorLine(container)}
-      <div class="settings-list-panel">
-        ${
-          extensions.length === 0
-            ? html`<div class="settings-empty-state">No extensions.</div>`
-            : extensions.map(
-                (name) => html`
-                  <div class="settings-row">
-                    <span class="settings-row-name">${name}</span>
-                    <sp-action-button
-                      size="xs"
-                      quiet
-                      title=${`Remove ${name}`}
-                      @click=${() => remove(name)}
-                    >
-                      <sp-icon-delete slot="icon"></sp-icon-delete>
-                    </sp-action-button>
-                  </div>
-                `,
-              )
-        }
-        <div class="settings-inline-form">
-          <sp-textfield
-            size="s"
-            class="settings-extension-name"
-            placeholder="@scope/package"
-            .value=${pending}
-            @input=${(e: Event) => {
-              pendingExtension.set(container, (e.target as HTMLInputElement).value);
-            }}
-            @keydown=${(e: KeyboardEvent) => {
-              if (e.key === "Enter") {
-                add();
-              }
-            }}
-          ></sp-textfield>
-          <sp-action-button size="s" @click=${add}>Add</sp-action-button>
-        </div>
-      </div>
-    </div>
-  `;
-
-  litRender(tpl, container);
+const bound = new WeakMap<HTMLElement, DeployActions>();
+
+function deployActions(container: HTMLElement): DeployActions {
+  let acts = bound.get(container);
+  if (!acts) {
+    acts = {
+      setAdapter: (value: string) => {
+        /* What the picker now holds, told to the scope before anything is decided about it.
+           Without this a rejected write leaves the refused platform showing: the binding writes
+           the value the scope names, and the scope never said anything but the adapter on disk —
+           so re-stating it is not a change and nothing is written back. Echoing first makes the
+           snap-back a real move, which is the job `live()` did in the template this replaced. */
+        deployMounts.get(container)?.update({ adapter: value });
+        void persist(container, { build: { ...config().build, adapter: value } });
+      },
+    };
+    bound.set(container, acts);
+  }
+  return acts;
 }
 
-// ─── Deploy ───────────────────────────────────────────────────────────────────
-
-/** The build adapters `@jxsuite/compiler` ships. One enumeration, shared with New Project. */
-export const BUILD_ADAPTERS: readonly { value: string; label: string }[] = [
-  { label: "Static", value: "static" },
-  { label: "Bun", value: "bun" },
-  { label: "Node", value: "node" },
-  { label: "Cloudflare Workers", value: "cloudflare-workers" },
-  { label: "Cloudflare Pages", value: "cloudflare-pages" },
-];
-
 /**
  * Where the project is built for, and what it is built with.
  *
  * The adapter moved off Overview: Overview says what the site IS, and the adapter is a fact about
  * where it SHIPS — the same split §2 principle 5 applies to Contexts.
  *
+ * The pane calls this again whenever something it cannot see may have changed, and a remount would
+ * take the keyboard out of the picker the reader is in — so a standing surface is updated and only
+ * a container the document has left is mounted into again.
+ *
  * @param {HTMLElement} container
  */
 export function renderDeploySection(container: HTMLElement): void {
-  const rerender = () => renderDeploySection(container);
-  const current = config().build?.adapter || "static";
-
-  const onAdapterChange = (e: Event) => {
-    void persist(
-      container,
-      { build: { ...config().build, adapter: (e.target as HTMLInputElement).value } },
-      rerender,
-    );
-  };
-
-  const tpl = html`
-    <div class="settings-section">
-      <h3 class="settings-section-title">Deploy</h3>
-      ${errorLine(container)}
-      <div class="settings-field">
-        <label class="settings-field-label">Platform Adapter</label>
-        <p class="settings-field-desc">
-          What the site is built for. Static writes plain files; the others emit a server entry for
-          that runtime.
-        </p>
-        <sp-picker
-          size="s"
-          label="Platform Adapter"
-          class="settings-build-adapter"
-          .value=${current}
-          @change=${onAdapterChange}
-        >
-          ${BUILD_ADAPTERS.map(
-            (adapter) => html`<sp-menu-item value=${adapter.value}>${adapter.label}</sp-menu-item>`,
-          )}
-        </sp-picker>
-      </div>
-    </div>
-  `;
-
-  litRender(tpl, container);
+  const standing = deployMounts.get(container);
+  if (standing?.connected()) {
+    standing.update(deployValues(container));
+    return;
+  }
+  standing?.dispose();
+  deployMounts.set(
+    container,
+    mountDeploySurface(container, deployValues(container), deployActions(container)),
+  );
 }
 
 // ─── Raw JSON ─────────────────────────────────────────────────────────────────
 
+/** The surface mounted in each Raw JSON container. */
+const rawJsonMounts = new WeakMap<HTMLElement, RawJsonSurfaceHandle>();
+
 /**
- * `project.json` as it is written, and the way into editing it as text.
+ * The file as it is written.
  *
  * The serialisation is the chokepoint's own (`serializeProjectConfig`), so what this shows is what
  * a save writes — not a second pretty-printer that would disagree with the file by an indent.
+ */
+function rawJsonValues(): RawJsonValues {
+  return { json: serializeProjectConfig(config()) };
+}
+
+/**
+ * `project.json` as it is written, and the way into editing it as text.
  *
  * @param {HTMLElement} container
  */
 export function renderRawJsonSection(container: HTMLElement): void {
-  const tpl = html`
-    <div class="settings-section">
-      <h3 class="settings-section-title">Raw JSON</h3>
-      <p class="settings-field-desc">
-        The whole of <code>project.json</code>, as it is saved. Editing it as code opens the same
-        document in the Code editor — one undo stack, one dirty flag.
-      </p>
-      <pre class="settings-raw-json">${serializeProjectConfig(config())}</pre>
-      <sp-action-button
-        size="s"
-        class="settings-edit-as-code"
-        @click=${() => updateUi(tabOfContainer(container), "canvasMode", CODE_MODE)}
-      >
-        Edit as code
-      </sp-action-button>
-    </div>
-  `;
-
-  litRender(tpl, container);
+  const standing = rawJsonMounts.get(container);
+  if (standing?.connected()) {
+    standing.update(rawJsonValues());
+    return;
+  }
+  standing?.dispose();
+  rawJsonMounts.set(
+    container,
+    mountRawJsonSurface(container, rawJsonValues(), {
+      editAsCode: () => updateUi(tabOfContainer(container), "canvasMode", CODE_MODE),
+    }),
+  );
 }