@jxsuite/studio 0.33.0 → 0.35.0

package/src/new-project/design-fields.ts

@@ -0,0 +1,260 @@
+/**
+ * The design-quickstart section of the New Project Parameters step: colors, fonts, logo, and
+ * breakpoints. A trimmed-down, creation-time version of the settings modal — every field is
+ * optional, and empty fields leave the template/starter defaults untouched (the backend applies
+ * overrides best-effort against the starters' shared token conventions).
+ */
+
+import { html } from "lit-html";
+import type { TemplateResult } from "lit-html";
+
+/** Mirrors @jxsuite/create's DesignOptions (threaded through platform.createProject). */
+export interface DesignSelection {
+  accent?: string;
+  background?: string;
+  text?: string;
+  bodyFont?: string;
+  headingFont?: string;
+  media?: Record<string, string>;
+  logo?: { name: string; base64: string };
+}
+
+interface MediaRow {
+  name: string;
+  value: string;
+}
+
+let _accent = "";
+let _background = "";
+let _text = "";
+let _bodyFont = "";
+let _headingFont = "";
+let _mediaRows: MediaRow[] = [];
+let _mediaNote = "";
+let _logo: { name: string; base64: string } | null = null;
+let _logoError = "";
+
+// Prefills are display defaults, not overrides: a value identical to its prefill is NOT sent, so
+// An untouched form leaves the template/starter exactly as authored (a starter's registry accent
+// Need not equal its --color-primary, and re-sending a template's own $media is just noise).
+let _prefillAccent = "";
+let _prefillMediaJson = "";
+
+function mediaRowsJson(rows: MediaRow[]): string {
+  return JSON.stringify(rows.map((r) => [r.name.trim(), r.value.trim()]));
+}
+
+export interface DesignPrefill {
+  /** Prefilled accent color (a starter's registry accent). */
+  accent?: string;
+  /** Prefilled breakpoint rows (a template's $media preset). */
+  media?: Record<string, string>;
+  /** Shown under the breakpoints editor when it starts empty (starter sites). */
+  mediaNote?: string;
+}
+
+/** Reset the section for a fresh modal pass, seeding prefills from the chosen source. */
+export function resetDesignFields(prefill: DesignPrefill = {}) {
+  _accent = prefill.accent ?? "";
+  _background = "";
+  _text = "";
+  _bodyFont = "";
+  _headingFont = "";
+  _mediaRows = Object.entries(prefill.media ?? {}).map(([name, value]) => ({ name, value }));
+  _mediaNote = prefill.mediaNote ?? "";
+  _logo = null;
+  _logoError = "";
+  _prefillAccent = _accent;
+  _prefillMediaJson = mediaRowsJson(_mediaRows);
+}
+
+/**
+ * The design overrides to send with createProject, or undefined when everything was left at its
+ * defaults (the payload then stays byte-identical to a plain create).
+ */
+export function collectDesign(): DesignSelection | undefined {
+  const media: Record<string, string> = {};
+  for (const row of _mediaRows) {
+    if (row.name.trim() && row.value.trim()) {
+      media[row.name.trim()] = row.value.trim();
+    }
+  }
+  const accentChanged = _accent.trim() && _accent.trim() !== _prefillAccent;
+  const mediaChanged =
+    Object.keys(media).length > 0 && mediaRowsJson(_mediaRows) !== _prefillMediaJson;
+  const design: DesignSelection = {
+    ...(accentChanged ? { accent: _accent.trim() } : {}),
+    ...(_background.trim() ? { background: _background.trim() } : {}),
+    ...(_text.trim() ? { text: _text.trim() } : {}),
+    ...(_bodyFont.trim() ? { bodyFont: _bodyFont.trim() } : {}),
+    ...(_headingFont.trim() ? { headingFont: _headingFont.trim() } : {}),
+    ...(mediaChanged ? { media } : {}),
+    ...(_logo ? { logo: _logo } : {}),
+  };
+  return Object.keys(design).length > 0 ? design : undefined;
+}
+
+/** Base64-encode a small file (logos) without blowing the call stack on spread. */
+async function fileToBase64(file: File): Promise<string> {
+  const bytes = new Uint8Array(await file.arrayBuffer());
+  let binary = "";
+  const CHUNK = 32_768;
+  for (let i = 0; i < bytes.length; i += CHUNK) {
+    binary += String.fromCodePoint(...bytes.subarray(i, i + CHUNK));
+  }
+  return btoa(binary);
+}
+
+function colorRow(
+  label: string,
+  value: string,
+  set: (v: string) => void,
+  rerender: () => void,
+): TemplateResult {
+  const onText = (e: Event) => {
+    set((e.target as HTMLInputElement).value);
+    rerender();
+  };
+  return html`
+    <div class="new-project-color-row">
+      <span class="new-project-label">${label}</span>
+      <div class="css-var-swatch" style="background:${value || "transparent"}">
+        <input type="color" .value=${value || "#888888"} @input=${onText} />
+      </div>
+      <sp-textfield placeholder="Keep default" .value=${value} @input=${onText}></sp-textfield>
+    </div>
+  `;
+}
+
+export function renderDesignFields(ctx: { rerender: () => void }): TemplateResult {
+  const { rerender } = ctx;
+
+  const onLogoChange = async (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (!file) {
+      return;
+    }
+    if (!/\.(svg|png|jpe?g|webp|gif|ico)$/i.test(file.name)) {
+      _logoError = "Use an SVG, PNG, JPEG, WebP, GIF, or ICO image";
+      _logo = null;
+      rerender();
+      return;
+    }
+    _logoError = "";
+    _logo = { base64: await fileToBase64(file), name: file.name };
+    rerender();
+  };
+
+  const setRow = (index: number, field: "name" | "value") => (e: Event) => {
+    const row = _mediaRows[index];
+    if (row) {
+      row[field] = (e.target as HTMLInputElement).value;
+    }
+  };
+
+  return html`
+    <div class="new-project-design-section">
+      <div class="new-project-design-heading">Colors</div>
+      ${colorRow("Accent", _accent, (v) => (_accent = v), rerender)}
+      ${colorRow("Background", _background, (v) => (_background = v), rerender)}
+      ${colorRow("Text", _text, (v) => (_text = v), rerender)}
+    </div>
+
+    <div class="new-project-design-section">
+      <div class="new-project-design-heading">Fonts</div>
+      <label class="new-project-field">
+        <span class="new-project-label">Body Font</span>
+        <sp-textfield
+          placeholder="Keep default (e.g. 'Inter', system-ui, sans-serif)"
+          .value=${_bodyFont}
+          @input=${(e: Event) => (_bodyFont = (e.target as HTMLInputElement).value)}
+          style="width: 100%"
+        ></sp-textfield>
+      </label>
+      <label class="new-project-field">
+        <span class="new-project-label">Heading Font</span>
+        <sp-textfield
+          placeholder="Keep default"
+          .value=${_headingFont}
+          @input=${(e: Event) => (_headingFont = (e.target as HTMLInputElement).value)}
+          style="width: 100%"
+        ></sp-textfield>
+      </label>
+    </div>
+
+    <div class="new-project-design-section">
+      <div class="new-project-design-heading">Logo</div>
+      <div class="new-project-logo-row">
+        <input type="file" accept=".svg,.png,.jpg,.jpeg,.webp,.gif,.ico" @change=${onLogoChange} />
+        ${_logo
+          ? html`
+              <span class="new-project-logo-name">
+                ${_logo.name} → public/${_logo.name}
+                <sp-action-button
+                  quiet
+                  size="s"
+                  title="Remove logo"
+                  @click=${() => {
+                    _logo = null;
+                    rerender();
+                  }}
+                >
+                  ✕
+                </sp-action-button>
+              </span>
+            `
+          : html`<span class="new-project-tab-intro"
+              >Copied into the project's public/ folder.</span
+            >`}
+      </div>
+      ${_logoError ? html`<div class="new-project-error">${_logoError}</div>` : ""}
+    </div>
+
+    <div class="new-project-design-section">
+      <div class="new-project-design-heading">Breakpoints</div>
+      ${_mediaRows.length === 0 && _mediaNote
+        ? html`<div class="new-project-tab-intro">${_mediaNote}</div>`
+        : ""}
+      ${_mediaRows.map(
+        (row, index) => html`
+          <div class="new-project-media-row">
+            <sp-textfield
+              class="new-project-media-name"
+              placeholder="--md"
+              .value=${row.name}
+              @input=${setRow(index, "name")}
+            ></sp-textfield>
+            <sp-textfield
+              class="new-project-media-value"
+              placeholder="(max-width: 768px)"
+              .value=${row.value}
+              @input=${setRow(index, "value")}
+            ></sp-textfield>
+            <sp-action-button
+              quiet
+              size="s"
+              title="Remove breakpoint"
+              @click=${() => {
+                _mediaRows.splice(index, 1);
+                rerender();
+              }}
+            >
+              ✕
+            </sp-action-button>
+          </div>
+        `,
+      )}
+      <sp-button
+        variant="secondary"
+        size="s"
+        @click=${() => {
+          _mediaRows.push({ name: "", value: "" });
+          rerender();
+        }}
+      >
+        Add Breakpoint
+      </sp-button>
+    </div>
+  `;
+}

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

@@ -0,0 +1,322 @@
+/**
+ * The New Project modal's Import source step: an AI-guided clone of an existing site. Gated behind
+ * the AI credentials form when no key is stored; otherwise a URL + crawl-options form. The
+ * name/directory parameters live on the modal's shared Parameters step; the running pipeline
+ * streams its progress into a log here and resolves the modal with the imported project.
+ */
+
+import { html } from "lit-html";
+import { getPlatform } from "../platform";
+import { getBaseUrl, getModel, getOpenAiKey, hasOpenAiKey } from "../services/ai-settings";
+import { errorMessage } from "@jxsuite/schema/parse";
+import type { TemplateResult } from "lit-html";
+import type { ProjectConfig } from "@jxsuite/schema/types";
+import type { ImportProgressEvent } from "../types";
+
+/** Structural view of src/ui/ai-credentials-form's controller (what this tab renders when gated). */
+export interface CredsFormLike {
+  render: () => TemplateResult;
+  startEdit: () => void;
+}
+
+export interface ImportTabCtx {
+  /** The modal's shared name/directory state (the import destination slug). */
+  form: { name: string; directory: string };
+  rerender: () => void;
+  /** Called with the imported project; the modal resolves and closes. */
+  onDone: (result: { root: string; config: ProjectConfig }) => void;
+  /** The modal's shared credentials-form instance, rendered while no key is stored. */
+  credsForm: CredsFormLike;
+}
+
+let _url = "";
+let _depth = 1;
+let _maxPages = 20;
+let _aiNaming = true;
+let _status: "idle" | "running" | "error" = "idle";
+let _log: ImportProgressEvent[] = [];
+let _errorMsg = "";
+let _abort: AbortController | null = null;
+let _dirManual = false;
+
+/** Reset the tab's state when the modal opens. */
+export function resetImportTab() {
+  _url = "";
+  _depth = 1;
+  _maxPages = 20;
+  _aiNaming = true;
+  _status = "idle";
+  _log = [];
+  _errorMsg = "";
+  _abort = null;
+  _dirManual = false;
+}
+
+function slugOf(name: string): string {
+  return name
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9]+/g, "-")
+    .replaceAll(/^-|-$/g, "");
+}
+
+/** True while an import stream is active (the modal disables tab switching and close). */
+export function isImportRunning(): boolean {
+  return _status === "running";
+}
+
+/** Abort the running import (the footer's Cancel Import button). */
+export function cancelImport(ctx: ImportTabCtx) {
+  _abort?.abort();
+  _abort = null;
+  _status = "idle";
+  ctx.rerender();
+}
+
+/**
+ * Validate the source step (the URL) before advancing to the Parameters step. Sets the inline error
+ * and returns false when invalid.
+ */
+export function validateImportSource(ctx: ImportTabCtx): boolean {
+  let parsed: URL | null = null;
+  try {
+    parsed = new URL(_url.trim());
+  } catch {
+    parsed = null;
+  }
+  if (!parsed || (parsed.protocol !== "http:" && parsed.protocol !== "https:")) {
+    _errorMsg = "Enter a valid URL (e.g. https://example.com)";
+    ctx.rerender();
+    return false;
+  }
+  _errorMsg = "";
+  return true;
+}
+
+/** Validate and kick off the import. Wired to the modal footer's primary button. */
+export async function startImport(ctx: ImportTabCtx) {
+  const platform = getPlatform();
+  if (_status === "running" || !platform.importSite) {
+    return;
+  }
+  let parsed: URL;
+  try {
+    parsed = new URL(_url.trim());
+  } catch {
+    _errorMsg = "Enter a valid URL (e.g. https://example.com)";
+    ctx.rerender();
+    return;
+  }
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+    _errorMsg = "The URL must start with http:// or https://";
+    ctx.rerender();
+    return;
+  }
+  if (!ctx.form.name.trim()) {
+    _errorMsg = "Project name is required";
+    ctx.rerender();
+    return;
+  }
+  if (!ctx.form.directory.trim()) {
+    ctx.form.directory = slugOf(ctx.form.name);
+  }
+
+  _status = "running";
+  _errorMsg = "";
+  _log = [];
+  _abort = new AbortController();
+  ctx.rerender();
+
+  try {
+    const key = getOpenAiKey();
+    const baseUrl = getBaseUrl();
+    const model = getModel();
+    const result = await platform.importSite(
+      {
+        url: parsed.href,
+        name: ctx.form.name.trim(),
+        directory: ctx.form.directory.trim(),
+        depth: _depth,
+        maxPages: _maxPages,
+        aiComponents: _aiNaming,
+        ...(key ? { apiKey: key } : {}),
+        ...(baseUrl ? { baseUrl } : {}),
+        ...(model ? { model } : {}),
+      },
+      (evt) => {
+        _log = [..._log, evt];
+        ctx.rerender();
+        requestAnimationFrame(() => {
+          const el = document.querySelector(".new-project-import-log");
+          if (el) {
+            el.scrollTop = el.scrollHeight;
+          }
+        });
+      },
+      _abort.signal,
+    );
+    _status = "idle";
+    _abort = null;
+    ctx.onDone(result);
+  } catch (error) {
+    if (_status !== "running") {
+      return; // Cancelled by the user — cancelImport already reset the tab.
+    }
+    _abort = null;
+    _status = "error";
+    _errorMsg = errorMessage(error);
+    ctx.rerender();
+  }
+}
+
+/** The footer's primary-button label for the Import tab's current state. */
+export function importButtonLabel(): string {
+  if (_status === "running") {
+    return "Importing…";
+  }
+  return _status === "error" ? "Retry Import" : "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();
+  };
+}
+
+function renderProgress(): TemplateResult {
+  const latest = _log.at(-1);
+  return html`
+    <div class="new-project-import-progress">
+      <sp-progress-circle indeterminate size="s"></sp-progress-circle>
+      <span class="new-project-import-phase">${latest ? latest.phase : "starting"}</span>
+      <span>${latest ? latest.message : "Starting import…"}</span>
+    </div>
+    <div class="new-project-import-log">
+      ${_log.map(
+        (evt) => html`
+          <div class="new-project-import-log-line">
+            <span class="new-project-import-phase">${evt.phase}</span>
+            ${evt.message}
+          </div>
+        `,
+      )}
+    </div>
+  `;
+}
+
+/** The streaming progress view shown (in place of the Parameters step) while a run is active. */
+export function renderImportProgress(): TemplateResult {
+  return renderProgress();
+}
+
+/** Inline error + retained log, rendered on the Parameters step after a failed run. */
+export function renderImportStatus(): TemplateResult {
+  if (_status !== "error") {
+    return html``;
+  }
+  return html`
+    ${_errorMsg ? html`<div class="new-project-error">${_errorMsg}</div>` : ""}
+    ${_log.length > 0
+      ? html`
+          <div class="new-project-import-log">
+            ${_log.map(
+              (evt) => html`
+                <div class="new-project-import-log-line">
+                  <span class="new-project-import-phase">${evt.phase}</span>
+                  ${evt.message}
+                </div>
+              `,
+            )}
+          </div>
+        `
+      : ""}
+  `;
+}
+
+export function renderImportSource(ctx: ImportTabCtx): TemplateResult {
+  if (!hasOpenAiKey()) {
+    return html`
+      <div class="new-project-tab-intro">
+        Importing uses an AI-guided pipeline to clone an existing site. Add an OpenAI-compatible API
+        key to continue.
+      </div>
+      <div class="new-project-creds">${ctx.credsForm.render()}</div>
+    `;
+  }
+
+  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=${_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="2"
+          .value=${_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=${_maxPages}
+          @change=${(e: Event) => {
+            _maxPages = Math.trunc(Number((e.target as HTMLInputElement).value)) || 1;
+          }}
+        ></sp-number-field>
+      </label>
+    </div>
+    <sp-switch
+      ?checked=${_aiNaming}
+      @change=${(e: Event) => {
+        _aiNaming = (e.target as HTMLInputElement).checked;
+      }}
+    >
+      AI component naming
+    </sp-switch>
+    ${_errorMsg ? html`<div class="new-project-error">${_errorMsg}</div>` : ""}
+    ${_status === "error" && _log.length > 0
+      ? html`
+          <div class="new-project-import-log">
+            ${_log.map(
+              (evt) => html`
+                <div class="new-project-import-log-line">
+                  <span class="new-project-import-phase">${evt.phase}</span>
+                  ${evt.message}
+                </div>
+              `,
+            )}
+          </div>
+        `
+      : ""}
+  `;
+}