@jxsuite/studio 4.1.0 → 5.1.0

package/src/new-project/import-tab.ts

@@ -1,8 +1,8 @@
 /**
- * The New Project modal's Import source step: an AI-guided clone of an existing site. Gated behind
+ * The New Project wizard's Import source step: an AI-guided clone of an existing site. Gated behind
  * the AI credentials gate (key form + the keyless Cloudflare option) until AI is usable — a local
  * key, or a backend holding its own; otherwise a URL, crawl options, a model and a brief. The
- * name/directory parameters live on the modal's shared Parameters step.
+ * name/directory parameters live on the wizard's shared second step.
  *
  * **This form no longer runs the import.** It gathers a brief and hands it to the assistant, which
  * runs the pipeline as a tool call. The wizard used to own the run, and the consequence was that a
@@ -10,15 +10,19 @@
  * in a log that vanished with the modal at the moment it handed off. In the transcript the run
  * survives, the model can read what the crawl actually found, and it can stop and ask about
  * anything the pipeline had to guess at.
+ *
+ * **It no longer draws the form either.** `surfaces/new-project.json` renders the fields and
+ * branches on {@link ImportView.breakpointValue}; what is left here is the state, the policy, the
+ * brief and one projection of all three. The gate went with the template — whether AI is usable is
+ * a question about the wizard rather than about this tab, so the modal asks it and picks the body,
+ * and the credentials form and the Cloudflare offer this tab used to interpolate are islands the
+ * surface hosts.
  */
 
-import { html, nothing } from "lit-html";
-import { live } from "lit/directives/live.js";
 import { getPlatform } from "../platform";
 import { preferredModel } from "../services/ai-models";
 import { createModelPicker } from "../ui/ai-model-picker";
 import { destinationPath } from "./location-fields";
-import type { TemplateResult } from "lit-html";
 import type { CreateProjectDestination, ImportBreakpointPolicy } from "../types";
 
 import { setPendingImportBrief } from "../services/import-seed";
@@ -41,42 +45,21 @@ const MAX_BREAKPOINTS = 12;
  */
 const MAX_DEPTH = 5;
 
-/** Structural view of src/ui/ai-credentials-form's controller (what this tab renders when gated). */
-export interface CredsFormLike {
-  render: () => TemplateResult;
-  startEdit: () => void;
-}
-
-/** Structural view of src/ui/ai-managed-connect's controller (the keyless option beside the form). */
-export interface ManagedConnectLike {
-  canOffer: () => boolean;
-  render: () => unknown;
-}
-
 export interface ImportTabCtx {
-  /** The modal's shared name/directory state (the import destination slug). */
+  /** The wizard's shared name/directory state (the import destination slug). */
   form: { name: string; directory: string };
   /**
-   * Validate the shared Parameters fields and return where to write, or null when something is
-   * missing (the modal has already rendered the reason inline). Either destination shape: a hosted
-   * backend imports into a repository it creates, so `"repo"` reaches here too.
+   * Validate the shared second step and return where to write, or null when something is missing
+   * (the wizard has already rendered the reason inline). Either destination shape: a hosted backend
+   * imports into a repository it creates, so `"repo"` reaches here too.
    */
   resolveDestination: () => CreateProjectDestination | null;
   rerender: () => void;
   /**
-   * Called with the brief the form gathered. The modal closes WITHOUT a project — the assistant
+   * Called with the brief the form gathered. The wizard closes WITHOUT a project — the assistant
    * runs the import as a tool call and creates it.
    */
   onHandoff: (brief: ImportBrief) => void;
-  /** The modal's shared credentials-form instance, rendered while the gate is closed. */
-  credsForm: CredsFormLike;
-  /**
-   * Whether AI is usable — a local key OR a backend holding credentials of its own. Also fires the
-   * capability probe while closed, so a managed platform's Cloudflare option can appear.
-   */
-  aiGateOpen: () => boolean;
-  /** The modal's shared keyless "Connect Cloudflare" controller, rendered beside the form. */
-  managedConnect: ManagedConnectLike;
 }
 
 let _url = "";
@@ -164,17 +147,31 @@ let _picker: ReturnType<typeof createModelPicker> | null = null;
 
 function modelPicker() {
   _picker ??= createModelPicker({
-    className: "new-project-import-model",
     getModel: () => _model || preferredModel(),
     // A draft, deliberately not `setModel` — see `_model`.
     onChange: (id) => {
       _model = id;
     },
     requestRender: () => _rerender?.(),
+    /* A field in a form column, so the control takes the column's width — the shape it used to get
+       from `.new-project-import-model`, said to the surface that owns the rule instead. */
+    width: "fill",
   });
   return _picker;
 }
 
+/**
+ * The picker's host element, for the wizard's `model-island`.
+ *
+ * Asking is what brings the picker's own mounted document up to date, so the wizard calls this on
+ * every repaint and puts the answer back where it already is.
+ *
+ * @returns {HTMLElement}
+ */
+export function importModelHost(): HTMLElement {
+  return modelPicker().render();
+}
+
 /**
  * The policy the three controls describe.
  *
@@ -225,8 +222,8 @@ function slugOf(name: string): string {
 }
 
 /**
- * Validate the source step (the URL) before advancing to the Parameters step. Sets the inline error
- * and returns false when invalid.
+ * Validate the source step (the URL) before advancing to the second step. Sets the inline error and
+ * returns false when invalid.
  */
 export function validateImportSource(ctx: ImportTabCtx): boolean {
   let parsed: URL | null = null;
@@ -245,7 +242,7 @@ export function validateImportSource(ctx: ImportTabCtx): boolean {
 }
 
 /**
- * The brief this form has gathered, or null when something is still missing (the modal has already
+ * The brief this form has gathered, or null when something is still missing (the wizard has already
  * rendered the reason inline).
  *
  * Exported so a test can read what the form would hand over without driving the assistant.
@@ -289,7 +286,7 @@ export function importBriefFor(ctx: ImportTabCtx): ImportBrief | null {
 }
 
 /**
- * Hand the brief to the assistant and close the wizard. Wired to the modal footer's primary button.
+ * Hand the brief to the assistant and close the wizard. Wired to the wizard's primary button.
  *
  * **The wizard does not run the import any more.** It used to, and the run's whole account of
  * itself — every phase line, every warning — was destroyed the moment it succeeded and the modal
@@ -314,236 +311,168 @@ export function handoffImport(ctx: ImportTabCtx) {
   ctx.onHandoff(brief);
 }
 
-/** The footer's primary-button label. One state: the wizard hands off and closes. */
+/** The wizard's primary-button label on this tab. One state: it hands off and closes. */
 export function importButtonLabel(): string {
   return "Import Site";
 }
 
-function onUrlInput(ctx: ImportTabCtx) {
-  return (e: Event) => {
-    _url = (e.target as HTMLInputElement).value;
-    // Prefill the project name from the hostname while the user hasn't typed one.
-    if (!ctx.form.name.trim()) {
-      try {
-        const host = new URL(_url).hostname.replace(/^www\./, "");
-        if (host) {
-          ctx.form.name = host;
-          if (!_dirManual) {
-            ctx.form.directory = slugOf(host);
-          }
-        }
-      } catch {
-        /* Partial URL while typing — leave the name alone. */
-      }
-    }
-    ctx.rerender();
-  };
+/**
+ * What the chosen mode will actually do, said under the control rather than beside it so a long
+ * sentence wraps instead of squeezing the row.
+ */
+function breakpointHint(): string {
+  if (_breakpointMode === "all") {
+    return "Every breakpoint the site declares becomes a canvas size. Real sites often declare nine.";
+  }
+  if (_breakpointMode === "explicit") {
+    return "The project gets these widths, each backed by the declared width nearest it.";
+  }
+  return "Evenly spaced across the widths the site declares — the narrowest, the widest, and the ones between.";
+}
+
+/** The Import step as the wizard's document draws it: strings, flags and rows. */
+export interface ImportView {
+  url: string;
+  depth: string;
+  maxDepth: string;
+  maxPages: string;
+  breakpointMode: string;
+  breakpointModes: { value: string; label: string }[];
+  /** Which value control the chosen mode takes: a count, a width list, or neither. */
+  breakpointValue: "count" | "widths" | "none";
+  breakpointCount: string;
+  maxBreakpoints: string;
+  breakpointWidths: string;
+  breakpointRounding: string;
+  roundings: { value: string; label: string }[];
+  breakpointHint: string;
+  aiNaming: boolean;
+  canVerify: boolean;
+  verify: boolean;
+  minFidelity: string;
+  prompt: string;
+  error: string;
 }
 
 /**
- * The Breakpoints control: how many of the site's own breakpoints the project ends up with.
+ * Everything the Import step draws, as one record.
  *
- * Three controls rather than one because they answer different questions and only some of them
- * apply at a time — a count is meaningless once you have named the widths, and both are meaningless
- * when you are keeping everything. The rounding picker stays for the two that use it: it decides
- * which DECLARED width backs a kept one, and the styles flip where the site says they do.
+ * It also re-points the model picker's scheduler at the current context, which is what
+ * `renderImportSource` did on the same call: `ImportTabCtx` is rebuilt per repaint, so the picker
+ * has to reach whichever one is live when its catalogue settles.
  *
  * @param {ImportTabCtx} ctx
- * @returns {TemplateResult}
+ * @returns {ImportView}
  */
-function breakpointsField(ctx: ImportTabCtx): TemplateResult {
-  const onMode = (e: Event) => {
-    _breakpointMode = (e.target as HTMLInputElement).value as BreakpointMode;
-    ctx.rerender();
+export function importView(ctx: ImportTabCtx): ImportView {
+  _rerender = ctx.rerender;
+  return {
+    aiNaming: _aiNaming,
+    breakpointCount: String(_breakpointCount),
+    breakpointHint: breakpointHint(),
+    breakpointMode: _breakpointMode,
+    breakpointModes: [
+      { label: "Limit to", value: "limit" },
+      { label: "Custom widths", value: "explicit" },
+      { label: "Keep all", value: "all" },
+    ],
+    breakpointRounding: _breakpointRounding,
+    breakpointValue:
+      _breakpointMode === "limit" ? "count" : _breakpointMode === "explicit" ? "widths" : "none",
+    breakpointWidths: _breakpointWidths,
+    canVerify: canVerify(),
+    depth: String(_depth),
+    error: _errorMsg,
+    maxBreakpoints: String(MAX_BREAKPOINTS),
+    maxDepth: String(MAX_DEPTH),
+    maxPages: String(_maxPages),
+    minFidelity: String(_minFidelity),
+    prompt: _prompt,
+    roundings: [
+      { label: "nearest", value: "nearest" },
+      { label: "round down", value: "down" },
+      { label: "round up", value: "up" },
+    ],
+    url: _url,
+    verify: _verify,
   };
-  return html`
-    <label class="new-project-field">
-      <span class="new-project-label">Breakpoints</span>
-      <div class="new-project-import-breakpoints">
-        <sp-picker
-          size="m"
-          class="new-project-breakpoint-mode"
-          label="Breakpoints"
-          .value=${live(_breakpointMode)}
-          @change=${onMode}
-        >
-          <sp-menu-item value="limit">Limit to</sp-menu-item>
-          <sp-menu-item value="explicit">Custom widths</sp-menu-item>
-          <sp-menu-item value="all">Keep all</sp-menu-item>
-        </sp-picker>
-        ${
-          _breakpointMode === "limit"
-            ? html`<sp-number-field
-                class="new-project-breakpoint-count"
-                min="1"
-                max=${MAX_BREAKPOINTS}
-                .value=${live(_breakpointCount)}
-                @change=${(e: Event) => {
-                  _breakpointCount = Math.trunc(Number((e.target as HTMLInputElement).value)) || 3;
-                }}
-              ></sp-number-field>`
-            : nothing
-        }
-        ${
-          _breakpointMode === "explicit"
-            ? html`<sp-textfield
-                class="new-project-breakpoint-widths"
-                placeholder="640, 1024, 1440"
-                .value=${live(_breakpointWidths)}
-                @input=${(e: Event) => {
-                  _breakpointWidths = (e.target as HTMLInputElement).value;
-                }}
-              ></sp-textfield>`
-            : nothing
-        }
-        ${
-          _breakpointMode === "all"
-            ? nothing
-            : html`<sp-picker
-                size="m"
-                class="new-project-breakpoint-rounding"
-                label="Rounding"
-                .value=${live(_breakpointRounding)}
-                @change=${(e: Event) => {
-                  _breakpointRounding = (e.target as HTMLInputElement).value as BreakpointRounding;
-                }}
-              >
-                <sp-menu-item value="nearest">nearest</sp-menu-item>
-                <sp-menu-item value="down">round down</sp-menu-item>
-                <sp-menu-item value="up">round up</sp-menu-item>
-              </sp-picker>`
-        }
-      </div>
-      <span class="new-project-hint">
-        ${
-          _breakpointMode === "all"
-            ? "Every breakpoint the site declares becomes a canvas size. Real sites often declare nine."
-            : _breakpointMode === "explicit"
-              ? "The project gets these widths, each backed by the declared width nearest it."
-              : "Evenly spaced across the widths the site declares — the narrowest, the widest, and the ones between."
-        }
-      </span>
-    </label>
-  `;
 }
 
-export function renderImportSource(ctx: ImportTabCtx): TemplateResult {
-  // `ctx` is rebuilt per render, so the picker's scheduler has to be re-pointed at the current one.
-  _rerender = ctx.rerender;
-  if (!ctx.aiGateOpen()) {
-    return html`
-      <div class="new-project-tab-intro">
-        Importing uses an AI-guided pipeline to clone an existing site.
-        ${
-          ctx.managedConnect.canOffer()
-            ? "Connect Cloudflare, or add an OpenAI-compatible API key, to continue."
-            : "Add an OpenAI-compatible API key to continue."
-        }
-      </div>
-      <div class="new-project-creds">${ctx.managedConnect.render()} ${ctx.credsForm.render()}</div>
-    `;
+/**
+ * The Site URL moved.
+ *
+ * It also prefills the project name from the hostname while the user has not typed one, which is
+ * why it takes the wizard's context: the name and the slug are the shared second step's, and this
+ * is the one field that can guess at them.
+ *
+ * @param {ImportTabCtx} ctx
+ * @param {string} value
+ */
+export function setImportUrl(ctx: ImportTabCtx, value: string): void {
+  _url = value;
+  if (ctx.form.name.trim()) {
+    return;
   }
-
-  return html`
-    <div class="new-project-tab-intro">
-      Clone an existing site into an editable Jx project: pages, styles, assets, and components.
-    </div>
-    <label class="new-project-field">
-      <span class="new-project-label">Site URL *</span>
-      <sp-textfield
-        placeholder="https://example.com"
-        .value=${live(_url)}
-        @input=${onUrlInput(ctx)}
-        style="width: 100%"
-      ></sp-textfield>
-    </label>
-    <div class="new-project-import-grid">
-      <label class="new-project-field">
-        <span class="new-project-label">Crawl Depth</span>
-        <sp-number-field
-          min="0"
-          max=${MAX_DEPTH}
-          .value=${live(_depth)}
-          @change=${(e: Event) => {
-            _depth = Math.trunc(Number((e.target as HTMLInputElement).value)) || 0;
-          }}
-        ></sp-number-field>
-      </label>
-      <label class="new-project-field">
-        <span class="new-project-label">Max Pages</span>
-        <sp-number-field
-          min="1"
-          max="100"
-          .value=${live(_maxPages)}
-          @change=${(e: Event) => {
-            _maxPages = Math.trunc(Number((e.target as HTMLInputElement).value)) || 1;
-          }}
-        ></sp-number-field>
-      </label>
-    </div>
-    ${breakpointsField(ctx)}
-    <sp-switch
-      .checked=${live(_aiNaming)}
-      @change=${(e: Event) => {
-        _aiNaming = (e.target as HTMLInputElement).checked;
-      }}
-    >
-      AI component naming
-    </sp-switch>
-    ${
-      canVerify()
-        ? html`<sp-switch
-            .checked=${live(_verify)}
-            @change=${(e: Event) => {
-              _verify = (e.target as HTMLInputElement).checked;
-              // The bar below it only means anything while the check runs, so it appears with it.
-              ctx.rerender();
-            }}
-          >
-            Check fidelity against the original (slower)
-          </sp-switch>`
-        : nothing
-    }
-    ${
-      canVerify() && _verify
-        ? html`
-            <label class="new-project-field">
-              <span class="new-project-label">Minimum fidelity</span>
-              <sp-number-field
-                class="new-project-min-fidelity"
-                min="0"
-                max="100"
-                .value=${live(_minFidelity)}
-                @change=${(e: Event) => {
-                  const raw = Math.trunc(Number((e.target as HTMLInputElement).value));
-                  _minFidelity = Number.isNaN(raw) ? 0 : Math.min(100, Math.max(0, raw));
-                }}
-              ></sp-number-field>
-              <span class="new-project-hint">
-                Below this average, the assistant reports that the clone did not match the original.
-                A floor rather than a target: a faithful import of a complicated site still lands
-                well under 100. Set 0 to report the score without judging it.
-              </span>
-            </label>
-          `
-        : ""
+  try {
+    const host = new URL(_url).hostname.replace(/^www\./, "");
+    if (host) {
+      ctx.form.name = host;
+      if (!_dirManual) {
+        ctx.form.directory = slugOf(host);
+      }
     }
-    <label class="new-project-field">
-      <span class="new-project-label">Model</span>
-      ${modelPicker().render()}
-    </label>
-    <label class="new-project-field">
-      <span class="new-project-label">What should the assistant do with it?</span>
-      <sp-textfield
-        multiline
-        class="new-project-import-prompt"
-        placeholder="Keep the layout but modernise the typography, and turn the news list into a content collection…"
-        .value=${live(_prompt)}
-        @input=${(e: Event) => {
-          _prompt = (e.target as HTMLInputElement).value;
-        }}
-      ></sp-textfield>
-    </label>
-    ${_errorMsg ? html`<div class="new-project-error">${_errorMsg}</div>` : ""}
-  `;
+  } catch {
+    /* Partial URL while typing — leave the name alone. */
+  }
+}
+
+/** How deep the crawl follows links. A field emptied to nothing means the front page alone. */
+export function setImportDepth(value: string): void {
+  _depth = Math.trunc(Number(value)) || 0;
+}
+
+/** How many pages the crawl may take at most. Never zero — a run with no pages is not a run. */
+export function setImportMaxPages(value: string): void {
+  _maxPages = Math.trunc(Number(value)) || 1;
+}
+
+/** Which of the three breakpoint answers the reader chose. */
+export function setBreakpointMode(value: string): void {
+  _breakpointMode = value as BreakpointMode;
+}
+
+/** How many breakpoints to keep under `limit`. Falls back to the default the field started from. */
+export function setBreakpointCount(value: string): void {
+  _breakpointCount = Math.trunc(Number(value)) || 3;
+}
+
+/** The comma-separated width list under `explicit`, exactly as it is being typed. */
+export function setBreakpointWidths(value: string): void {
+  _breakpointWidths = value;
+}
+
+/** Which declared width backs a kept one. */
+export function setBreakpointRounding(value: string): void {
+  _breakpointRounding = value as BreakpointRounding;
+}
+
+/** Whether the importer names components with a model rather than by position. */
+export function setImportAiNaming(on: boolean): void {
+  _aiNaming = on;
+}
+
+/** Whether the run screenshots the clone against the original. */
+export function setImportVerify(on: boolean): void {
+  _verify = on;
+}
+
+/** The fidelity floor, clamped to a percentage: a bar outside 0–100 is not a bar. */
+export function setImportMinFidelity(value: string): void {
+  const raw = Math.trunc(Number(value));
+  _minFidelity = Number.isNaN(raw) ? 0 : Math.min(100, Math.max(0, raw));
+}
+
+/** What the reader wants done with the site once it is in. */
+export function setImportPrompt(value: string): void {
+  _prompt = value;
 }