@jxsuite/studio 0.35.0 → 0.37.0

package/src/publish/publish-panel.ts

@@ -0,0 +1,360 @@
+/// <reference lib="dom" />
+/**
+ * Publish panel — the one-click Cloudflare Pages publish flow, driven by the
+ * PAL's cf* members. States: unsupported platform → info; no credential →
+ * connect (hosted OAuth via cfConnect, or an API-token form backed by
+ * cf-settings); connected without `build.deploy` → create-and-connect form;
+ * connected → deployment status (publishing rides every commit).
+ *
+ * @license MIT
+ */
+
+import { html } from "lit-html";
+import type { DeployConfig, ProjectConfig } from "@jxsuite/schema/types";
+import { getPlatform } from "../platform";
+import { getCfToken, setCfToken } from "../services/cf-settings";
+import { projectState } from "../store";
+import type { CfConnection } from "../types";
+import { openModal } from "../ui/layers";
+import type { CfAccount, PagesDeploymentInfo } from "./pages-service";
+import {
+  connectDeploy,
+  latestDeployment,
+  listAccounts,
+  platformSupportsPublish,
+  writeDeployConfig,
+} from "./pages-service";
+
+const PAGES_APP_INSTALL_URL = "https://github.com/apps/cloudflare-pages/installations/new";
+
+let _handle: ReturnType<typeof openModal> | null = null;
+let _connection: CfConnection | null | "loading" = "loading";
+let _accounts: CfAccount[] = [];
+let _deployment: PagesDeploymentInfo | null = null;
+let _error = "";
+let _busy = false;
+let _form = { accountId: "", branch: "main", owner: "", projectName: "", repo: "" };
+
+function currentConfig(): ProjectConfig | null {
+  return (projectState?.projectConfig as ProjectConfig | undefined) ?? null;
+}
+
+function currentDeploy(): DeployConfig | undefined {
+  return currentConfig()?.build?.deploy;
+}
+
+function deriveSlug(name: string): string {
+  return (
+    name
+      .toLowerCase()
+      .replaceAll(/[^a-z0-9]+/g, "-")
+      .replaceAll(/^-+|-+$/g, "")
+      .slice(0, 58) || "site"
+  );
+}
+
+/** Prefill owner/repo from cloud roots ("owner/repo"); blank elsewhere. */
+function prefillRepo(): { owner: string; repo: string } {
+  const root = getPlatform().projectRoot;
+  const match = /^([\w.-]+)\/([\w.-]+)$/.exec(root);
+  return match ? { owner: match[1]!, repo: match[2]! } : { owner: "", repo: "" };
+}
+
+async function loadConnection(): Promise<void> {
+  _connection = "loading";
+  render();
+  try {
+    _connection = (await getPlatform().cfConnection?.()) ?? null;
+    if (_connection?.connected) {
+      _accounts = await listAccounts();
+      _form.accountId = _connection.accountId ?? _accounts[0]?.id ?? "";
+      const deploy = currentDeploy();
+      if (deploy) {
+        _deployment = await latestDeployment(deploy);
+      }
+    }
+  } catch (error) {
+    _connection = null;
+    _error = error instanceof Error ? error.message : String(error);
+  }
+  render();
+}
+
+async function saveToken(host: HTMLElement): Promise<void> {
+  const input = host.querySelector<HTMLInputElement>("#cf-token-input");
+  setCfToken(input?.value ?? "");
+  _error = "";
+  await loadConnection();
+}
+
+async function hostedConnect(): Promise<void> {
+  _busy = true;
+  render();
+  try {
+    await getPlatform().cfConnect?.();
+  } catch (error) {
+    _error = error instanceof Error ? error.message : String(error);
+  }
+  _busy = false;
+  await loadConnection();
+}
+
+async function submitConnect(): Promise<void> {
+  const config = currentConfig();
+  if (!config) {
+    return;
+  }
+  if (!_form.projectName || !_form.owner || !_form.repo || !_form.accountId) {
+    _error = "Account, project name, and the GitHub owner/repo are all required.";
+    render();
+    return;
+  }
+  _busy = true;
+  _error = "";
+  render();
+  try {
+    const deploy = await connectDeploy(config, {
+      accountId: _form.accountId,
+      owner: _form.owner,
+      productionBranch: _form.branch || "main",
+      projectName: _form.projectName,
+      repo: _form.repo,
+    });
+    _deployment = await latestDeployment(deploy).catch(() => null);
+  } catch (error) {
+    _error = error instanceof Error ? error.message : String(error);
+  }
+  _busy = false;
+  render();
+}
+
+async function disconnect(): Promise<void> {
+  const config = currentConfig();
+  if (!config) {
+    return;
+  }
+  _busy = true;
+  render();
+  try {
+    await writeDeployConfig(config, null);
+    _deployment = null;
+  } catch (error) {
+    _error = error instanceof Error ? error.message : String(error);
+  }
+  _busy = false;
+  render();
+}
+
+function close(): void {
+  _handle?.close();
+  _handle = null;
+}
+
+function fieldRow(label: string, input: unknown) {
+  return html`
+    <label class="publish-field">
+      <span>${label}</span>
+      ${input}
+    </label>
+  `;
+}
+
+function credentialTpl() {
+  const platform = getPlatform();
+  if (platform.cfConnect) {
+    return html`
+      <p>Connect your Cloudflare account to publish this site.</p>
+      <sp-button ?disabled=${_busy} @click=${() => void hostedConnect()}>
+        Connect Cloudflare
+      </sp-button>
+    `;
+  }
+  return html`
+    <p>
+      Paste a Cloudflare API token (permissions: Account Settings Read, Pages Read/Write). It is
+      stored locally and only sent to the same-origin proxy.
+    </p>
+    ${fieldRow(
+      "API token",
+      html`<sp-textfield
+        id="cf-token-input"
+        type="password"
+        value=${getCfToken()}
+        placeholder="cf_..."
+      ></sp-textfield>`,
+    )}
+    <sp-button ?disabled=${_busy} @click=${(e: Event) => void saveToken(hostOf(e))}>
+      Verify & Connect
+    </sp-button>
+  `;
+}
+
+function hostOf(e: Event): HTMLElement {
+  return (e.target as HTMLElement).closest(".publish-modal") ?? document.body;
+}
+
+function connectFormTpl() {
+  return html`
+    <p>
+      Create a Cloudflare Pages project connected to this repository. Every commit then builds and
+      publishes automatically (<code>bunx jx build</code>).
+    </p>
+    ${fieldRow(
+      "Account",
+      html`
+        <sp-picker
+          value=${_form.accountId}
+          @change=${(e: Event) => {
+            _form.accountId = (e.target as HTMLInputElement).value;
+          }}
+        >
+          ${_accounts.map((a) => html`<sp-menu-item value=${a.id}>${a.name}</sp-menu-item>`)}
+        </sp-picker>
+      `,
+    )}
+    ${fieldRow(
+      "Pages project name",
+      html`<sp-textfield
+        value=${_form.projectName}
+        @input=${(e: Event) => {
+          _form.projectName = (e.target as HTMLInputElement).value;
+        }}
+      ></sp-textfield>`,
+    )}
+    ${fieldRow(
+      "GitHub owner",
+      html`<sp-textfield
+        value=${_form.owner}
+        @input=${(e: Event) => {
+          _form.owner = (e.target as HTMLInputElement).value;
+        }}
+      ></sp-textfield>`,
+    )}
+    ${fieldRow(
+      "GitHub repository",
+      html`<sp-textfield
+        value=${_form.repo}
+        @input=${(e: Event) => {
+          _form.repo = (e.target as HTMLInputElement).value;
+        }}
+      ></sp-textfield>`,
+    )}
+    ${fieldRow(
+      "Production branch",
+      html`<sp-textfield
+        value=${_form.branch}
+        @input=${(e: Event) => {
+          _form.branch = (e.target as HTMLInputElement).value;
+        }}
+      ></sp-textfield>`,
+    )}
+    <sp-button ?disabled=${_busy} @click=${() => void submitConnect()}>
+      ${_busy ? "Connecting…" : "Create & Connect"}
+    </sp-button>
+  `;
+}
+
+function statusTpl(deploy: DeployConfig) {
+  return html`
+    <p>
+      Connected to Pages project <strong>${deploy.projectName}</strong>
+      ${deploy.productionUrl
+        ? html` —
+            <a href=${deploy.productionUrl} target="_blank" rel="noreferrer">
+              ${deploy.productionUrl}
+            </a>`
+        : ""}
+    </p>
+    ${_deployment
+      ? html`
+          <p>
+            Latest deployment: <strong>${_deployment.stage}: ${_deployment.status}</strong>
+            (${_deployment.environment}) —
+            <a href=${_deployment.url} target="_blank" rel="noreferrer">preview</a>
+          </p>
+        `
+      : html`<p>No deployments yet — the first commit after connecting triggers one.</p>`}
+    <p class="publish-hint">Publishing happens automatically on every commit.</p>
+    <div class="publish-actions">
+      <sp-button variant="secondary" ?disabled=${_busy} @click=${() => void loadConnection()}>
+        Refresh
+      </sp-button>
+      <sp-button variant="negative" ?disabled=${_busy} @click=${() => void disconnect()}>
+        Disconnect
+      </sp-button>
+    </div>
+  `;
+}
+
+function bodyTpl() {
+  if (!platformSupportsPublish()) {
+    return html`
+      <p>
+        This platform cannot reach the Cloudflare API. Publish by committing and pushing — your host
+        builds <code>bunx jx build</code> and serves <code>dist/</code>.
+      </p>
+    `;
+  }
+  if (_connection === "loading") {
+    return html`<p>Checking Cloudflare connection…</p>`;
+  }
+  if (!_connection?.connected) {
+    return credentialTpl();
+  }
+  const deploy = currentDeploy();
+  return deploy ? statusTpl(deploy) : connectFormTpl();
+}
+
+function errorTpl() {
+  if (!_error) {
+    return "";
+  }
+  const needsPagesApp = /github/i.test(_error) && /app|install|source|repo/i.test(_error);
+  return html`
+    <p class="publish-error">
+      ${_error}
+      ${needsPagesApp
+        ? html` — if the Cloudflare Pages GitHub App is not installed on the repository,
+            <a href=${PAGES_APP_INSTALL_URL} target="_blank" rel="noreferrer">install it</a> and
+            retry.`
+        : ""}
+    </p>
+  `;
+}
+
+function render(): void {
+  const tpl = html`
+    <div class="new-project-modal publish-modal">
+      <div class="new-project-modal-header">
+        <h2 class="new-project-modal-title">Publish</h2>
+        <sp-action-button size="s" quiet @click=${close}>✕</sp-action-button>
+      </div>
+      <div class="new-project-modal-body">${bodyTpl()} ${errorTpl()}</div>
+    </div>
+  `;
+  if (_handle) {
+    _handle.update(tpl);
+  } else {
+    _handle = openModal(tpl);
+  }
+}
+
+/** Open the publish modal for the active project. */
+export function openPublishPanel(): void {
+  const config = currentConfig();
+  const { owner, repo } = prefillRepo();
+  _connection = "loading";
+  _accounts = [];
+  _deployment = null;
+  _error = "";
+  _busy = false;
+  _form = {
+    accountId: "",
+    branch: "main",
+    owner,
+    projectName: currentDeploy()?.projectName ?? deriveSlug(config?.name ?? ""),
+    repo,
+  };
+  render();
+  void loadConnection();
+}

package/src/services/ai-models.ts

@@ -11,6 +11,7 @@
  * @license MIT
  */
 
+import type { AiModelsResponse } from "@jxsuite/protocol";
 import { getPlatform } from "../platform";
 import { getBaseUrl, getOpenAiKey } from "./ai-settings";
 
@@ -20,10 +21,35 @@ export interface AiModel {
 }
 
 let cache: AiModel[] | null = null;
+let proxyConfigured = false;
+let proxyManaged = false;
+let proxyDefaultModel = "";
 
 /** Drop the cached model list (call after credentials/endpoint changes). */
 export function invalidateModelCache() {
   cache = null;
+  proxyConfigured = false;
+  proxyManaged = false;
+  proxyDefaultModel = "";
+}
+
+/**
+ * Whether the proxy reported itself configured on the last fetch — true when the backend holds
+ * credentials (managed platforms, OPENAI_API_KEY env), so the assistant works without a locally
+ * stored key.
+ */
+export function isProxyConfigured(): boolean {
+  return proxyConfigured;
+}
+
+/** Whether the platform manages AI credentials itself (cloud Workers AI). */
+export function isManagedProxy(): boolean {
+  return proxyManaged;
+}
+
+/** The proxy's preferred model id ("" when it does not declare one). */
+export function getProxyDefaultModel(): string {
+  return proxyDefaultModel;
 }
 
 /**
@@ -58,7 +84,10 @@ export async function fetchAvailableModels(
   if (!resp.ok) {
     throw new Error(`HTTP ${resp.status}`);
   }
-  const data = (await resp.json()) as { models?: { id: string; name?: string }[] };
+  const data = (await resp.json()) as Partial<AiModelsResponse>;
+  proxyConfigured = data.configured === true;
+  proxyManaged = data.managed === true;
+  proxyDefaultModel = data.defaultModel ?? "";
   cache = (data.models || []).map((m) => ({ id: m.id, name: m.name || m.id }));
   return cache;
 }

package/src/services/cf-settings.ts

@@ -0,0 +1,58 @@
+/// <reference lib="dom" />
+/**
+ * Cf-settings — local persistence for the Cloudflare publish connection on
+ * platforms without a hosted OAuth broker (dev server, desktop). The API
+ * token is stored like the AI key: localStorage first, mirrored through the
+ * platform settings backend where one exists. It only ever leaves the machine
+ * to the same-origin `/__studio/cf/proxy`, which forwards it as a bearer to
+ * api.cloudflare.com (not CORS-enabled, hence the proxy).
+ *
+ * @license MIT
+ */
+
+import { persistSettings } from "./settings-store";
+
+const TOKEN_STORAGE = "jx.cf.token";
+const ACCOUNT_STORAGE = "jx.cf.accountId";
+
+function read(key: string): string {
+  try {
+    return globalThis.localStorage?.getItem(key) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+function write(key: string, value: string): void {
+  try {
+    const trimmed = (value || "").trim();
+    if (trimmed) {
+      globalThis.localStorage?.setItem(key, trimmed);
+    } else {
+      globalThis.localStorage?.removeItem(key);
+    }
+  } catch {
+    // Storage unavailable (private mode) — the connection just won't persist.
+  }
+  persistSettings();
+}
+
+/** The stored Cloudflare API token, or "" when not connected. */
+export function getCfToken(): string {
+  return read(TOKEN_STORAGE);
+}
+
+/** Persist (or clear, with a blank value) the Cloudflare API token. */
+export function setCfToken(token: string): void {
+  write(TOKEN_STORAGE, token);
+}
+
+/** The selected Cloudflare account id, or "" when none chosen yet. */
+export function getCfAccountId(): string {
+  return read(ACCOUNT_STORAGE);
+}
+
+/** Persist (or clear) the selected Cloudflare account id. */
+export function setCfAccountId(accountId: string): void {
+  write(ACCOUNT_STORAGE, accountId);
+}

package/src/services/settings-store.ts

@@ -14,7 +14,13 @@
 import { getPlatform, hasPlatform } from "../platform";
 
 /** The localStorage keys mirrored into the platform's user-settings store. */
-export const PERSISTED_SETTINGS_KEYS = ["jx.ai.openaiKey", "jx.ai.baseUrl", "jx.ai.model"] as const;
+export const PERSISTED_SETTINGS_KEYS = [
+  "jx.ai.openaiKey",
+  "jx.ai.baseUrl",
+  "jx.ai.model",
+  "jx.cf.token",
+  "jx.cf.accountId",
+] as const;
 
 /** Read a localStorage value defensively, treating unavailable/throwing storage as empty. */
 function readLocal(key: string): string {

package/src/studio.ts

@@ -77,6 +77,11 @@ import {
   setupTreeKeyboard,
 } from "./files/files";
 import { startFsSync } from "./files/fs-events";
+import {
+  configureCollabNotifier,
+  configureCollabParser,
+  configureCollabSerializer,
+} from "./collab/collab-session";
 import { renderImportsTemplate } from "./panels/imports-panel";
 import { renderHeadTemplate } from "./panels/head-panel";
 import { exportCemManifest as _exportCemManifest } from "./services/cem-export";
@@ -126,6 +131,7 @@ import {
 } from "./panels/block-action-bar";
 import { initCssData } from "./panels/style-utils";
 import { initQuickSearch } from "./panels/quick-search";
+import { hydrateProjectList } from "./project-list";
 import { addRecentProject, hydrateRecentProjects, removeRecentProject } from "./recent-projects";
 import { hydrateSettings } from "./services/settings-store";
 import { initWelcome } from "./panels/welcome-screen";
@@ -570,6 +576,18 @@ function safeRenderRightPanel() {
 // Now that renderers are registered, bootstrap
 registerFunctionCompletions();
 
+// Collab sessions serialize/parse through the format host when mirroring between the structure
+// Tree and the shared source text, and surface freezes via the status bar.
+configureCollabSerializer(serializeDocument);
+configureCollabParser(async (tab, text) => {
+  if (tab.documentPath && formatForPath(tab.documentPath)) {
+    const parsed = await parseSourceForPath(tab.documentPath, text);
+    return { document: parsed.document as JxMutableNode, frontmatter: parsed.frontmatter };
+  }
+  return { document: JSON.parse(text) as JxMutableNode };
+});
+configureCollabNotifier(statusMessage);
+
 let fsUnsub: (() => void) | null = null;
 /** (Re)subscribe the sidebar to backend filesystem events for the active project. */
 function ensureFsSync() {
@@ -744,6 +762,13 @@ void hydrateRecentProjects().then(() => {
   render();
 });
 
+// Hydrate the platform's project catalogue (dev server sites, cloud projects), then refresh the
+// Welcome screen, which reads it synchronously. No-op on platforms without listProjects.
+// oxlint-disable-next-line unicorn/prefer-top-level-await -- deliberate fire-and-forget: hydration must not block initial render
+void hydrateProjectList().then(() => {
+  render();
+});
+
 // Hydrate user settings (AI connection parameters) from the backend store, then re-render so
 // Key-gated surfaces (assistant gate, New Project Import/Agent tabs) see the stored key.
 // oxlint-disable-next-line unicorn/prefer-top-level-await -- deliberate fire-and-forget: hydration must not block initial render

package/src/tabs/doc-op-apply.ts

@@ -4,86 +4,10 @@
  * from live editing: history replay in the parent ({@link file://./transact.ts}) and the iframe
  * canvas's non-reactive shadow doc (the patch source-of-truth across the cross-origin bridge).
  *
- * Dependency-light on purpose: it pulls only the pure path helper from `../state` and clones values
- * with a local JSON round-trip, so the slim canvas-iframe bundle can import it without dragging in
- * the editor's reactive store / format host.
+ * The implementation is the canonical one in `@jxsuite/collab/ops` (yjs-free, so the slim
+ * canvas-iframe bundle imports it without dragging yjs in); this module re-exports it so both sides
+ * of the frame boundary — and the collab bridge — replay ops through one code path.
  */
 
-import { getNodeAtPath } from "../state";
-import type { JxDocOp } from "./patch-ops";
-import type { JxMutableNode } from "@jxsuite/schema/types";
-
-/** JSON round-trip clone — also normalizes away reactive proxies / functions / undefined. */
-function jsonClone<T>(value: T): T {
-  // oxlint-disable-next-line unicorn/prefer-structured-clone -- structuredClone throws on reactive proxies; JSON normalization is the point
-  return JSON.parse(JSON.stringify(value)) as T;
-}
-
-/** Deep-clone a recorded value (undefined/null pass through; reactive proxies are read through). */
-export function cloneValue<T>(v: T): T {
-  return v === undefined || v === null ? v : (jsonClone(v as object) as T);
-}
-
-/** The node's children array, lazily created; throws if `node` is itself a children array or mapped. */
-export function childArray(node: JxMutableNode): (JxMutableNode | string)[] {
-  // Defense-in-depth: a path that resolves to a children array (rather than a node) would
-  // Otherwise get a bogus `.children` property tacked on here, silently storing the insert where
-  // Nothing renders. Callers must pass a node; fail loudly if they don't.
-  if (Array.isArray(node)) {
-    throw new TypeError("Cannot insert into a children array; parentPath must point at a node");
-  }
-  if (!node.children) {
-    node.children = [];
-  }
-  if (!Array.isArray(node.children)) {
-    throw new TypeError("Cannot insert into mapped-array children; edit the map template instead");
-  }
-  return node.children;
-}
-
-/**
- * Apply a replayable doc op to a bare document tree. Values/nodes are cloned in, so the tree never
- * aliases the op object. Throws (with a machine-readable reason) when a target path is missing.
- */
-export function applyDocOpToDoc(doc: JxMutableNode, op: JxDocOp): void {
-  switch (op.op) {
-    case "set-key": {
-      const node = getNodeAtPath(doc, op.path);
-      if (!node) {
-        throw new Error(`doc-op-node-not-found:${op.path.join("/")}`);
-      }
-      const target = node as Record<string, unknown>;
-      if (op.value === undefined) {
-        delete target[op.key];
-      } else {
-        target[op.key] = cloneValue(op.value);
-      }
-      return;
-    }
-    case "insert-child": {
-      const parent = getNodeAtPath(doc, op.parentPath);
-      childArray(parent).splice(op.index, 0, cloneValue(op.node) as JxMutableNode);
-      return;
-    }
-    case "remove-child": {
-      const parent = getNodeAtPath(doc, op.parentPath);
-      childArray(parent).splice(op.index, 1);
-      return;
-    }
-    case "set-child": {
-      const parent = getNodeAtPath(doc, op.parentPath);
-      childArray(parent).splice(op.index, 1, cloneValue(op.node) as JxMutableNode);
-      return;
-    }
-    case "move-child": {
-      const fromParent = getNodeAtPath(doc, op.fromParentPath);
-      const toParent = getNodeAtPath(doc, op.toParentPath);
-      const [node] = childArray(fromParent).splice(op.fromIndex, 1);
-      childArray(toParent).splice(op.toIndex, 0, node!);
-      return;
-    }
-    default: {
-      throw new Error(`unknown-doc-op:${(op as JxDocOp).op}`);
-    }
-  }
-}
+export { applyDocOpToDoc, childArray, cloneValue } from "@jxsuite/collab/ops";
+export type { JxDocOp } from "@jxsuite/collab/ops";

package/src/tabs/patch-ops.ts

@@ -5,6 +5,8 @@
  * document as the single source of truth.
  */
 
+// oxlint-disable-next-line unicorn/prefer-export-from -- JxDocOpPair is also used locally (TransactionRecord)
+import type { JxDocOpPair } from "@jxsuite/collab/ops";
 import type { JxPath } from "../state";
 import type { Tab } from "./tab.js";
 
@@ -31,30 +33,12 @@ export type JxPatchOp =
 /**
  * Value-carrying document mutation, replayable in either direction. Mutators record a
  * forward/inverse pair per change; history applies them for surgical undo/redo and for
- * materializing states from checkpoints — without whole-document snapshots per edit.
+ * materializing states from checkpoints — without whole-document snapshots per edit. The definition
+ * is canonical in `@jxsuite/collab/ops` (the collab bridge mirrors the same ops into a shared
+ * Y.Doc); re-exported here so studio call sites keep their import path.
  */
-export type JxDocOp =
-  /** Set (or delete, when value is undefined) a key on the node at path. */
-  | { op: "set-key"; path: JxPath; key: string; value?: unknown }
-  /** Insert a node at parentPath.children[index]. */
-  | { op: "insert-child"; parentPath: JxPath; index: number; node: unknown }
-  /** Remove parentPath.children[index]. */
-  | { op: "remove-child"; parentPath: JxPath; index: number }
-  /** Replace parentPath.children[index] with node. */
-  | { op: "set-child"; parentPath: JxPath; index: number; node: unknown }
-  /** Raw two-splice move: remove fromParent.children[fromIndex], insert at toParent[toIndex]. */
-  | {
-      op: "move-child";
-      fromParentPath: JxPath;
-      fromIndex: number;
-      toParentPath: JxPath;
-      toIndex: number;
-    };
-
-export interface JxDocOpPair {
-  forward: JxDocOp;
-  inverse: JxDocOp;
-}
+export type { JxDocOp } from "@jxsuite/collab/ops";
+export type { JxDocOpPair };
 
 /** Everything recorded during one transaction. */
 export interface TransactionRecord {